Javascript 根据选项选择隐藏或显示div_Javascript_Jquery

Javascript 根据选项选择隐藏或显示div

javascript jquery

Javascript 根据选项选择隐藏或显示div,javascript,jquery,Javascript,Jquery,我正试图根据所选选项显示或隐藏div。选择客户时，应显示retCustDetails；选择交易时，应显示tradeCustDetails 请让我知道我在下面的代码中遗漏了什么 <h2>Place order</h2> Your details Customer Type: <select id="show" name="customerType" onchange="change()">

我正试图根据所选选项显示或隐藏div。选择客户时，应显示retCustDetails；选择交易时，应显示tradeCustDetails

请让我知道我在下面的代码中遗漏了什么

<h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change()">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

            <div id="retCustDetails" class="custDetails">
                Forename <input type="text" name="forename" id="forename" />
                Surname <input type="text" name="surname" id="surname" />
            </div>
            <div id="tradeCustDetails" class="custDetails" style="visibility:hidden">
                Company Name <input type="text" name="companyName" id="companyName" />
            </div>

您的代码中几乎没有小错误，我已经纠正了它，使其正常工作-


下单
你的细节
客户类型：
客户类型？
顾客
贸易
名字
姓
公司名称
功能改变（obj）{
var-selectBox=obj；
所选变量=selectBox.options[selectBox.selectedIndex]。值；
var retCustDetails=document.getElementById（“retCustDetails”）；
var tradeCustDetails=document.getElementById（“tradeCustDetails”）；
如果（选定=='ret'）{
retCustDetails.style.display=“block”；
tradeCustDetails.style.display=“无”；
}
否则{
retCustDetails.style.display=“无”；
tradeCustDetails.style.display=“block”；
}
}

您的代码中几乎没有小错误，我已将其更正以使其正常工作-


下单
你的细节
客户类型：
客户类型？
顾客
贸易
名字
姓
公司名称
功能改变（obj）{
var-selectBox=obj；
所选变量=selectBox.options[selectBox.selectedIndex]。值；
var retCustDetails=document.getElementById（“retCustDetails”）；
var tradeCustDetails=document.getElementById（“tradeCustDetails”）；
如果（选定=='ret'）{
retCustDetails.style.display=“block”；
tradeCustDetails.style.display=“无”；
}
否则{
retCustDetails.style.display=“无”；
tradeCustDetails.style.display=“block”；
}
}

您在html中使用了

可见性：隐藏，但在js
中，您正在更改显示属性。
将可见性：隐藏更改为显示：无
使用this
作为change
函数的参数，如onchange=“change（this）”

JS函数改为如下
function change(obj) {

    var selectBox = obj.value; 
    var retCustDetails = document.getElementById('retCustDetails');
    var tradeCustDetails = document.getElementById('tradeCustDetails');

    if(selectBox == 'ret'){
       retCustDetails.style.display = "block";
       tradeCustDetails.style.display = "none";
    }
    else{
       retCustDetails.style.display = "none";
       tradeCustDetails.style.display = "block";
    }
}

您在html中使用的是visibility:hidden
，但在js
中，您正在更改display属性。
将可见性：隐藏更改为显示：无
使用this
作为change
函数的参数，如onchange=“change（this）”

JS函数改为如下
function change(obj) {

    var selectBox = obj.value; 
    var retCustDetails = document.getElementById('retCustDetails');
    var tradeCustDetails = document.getElementById('tradeCustDetails');

    if(selectBox == 'ret'){
       retCustDetails.style.display = "block";
       tradeCustDetails.style.display = "none";
    }
    else{
       retCustDetails.style.display = "none";
       tradeCustDetails.style.display = "block";
    }
}

将此作为参数传递给change（）方法。还可以按如下所示更改if条件
if(selected === 'ret'){
//...
}

因为您得到了所选的值，所以它会给出“ret”或“trd”
将可见性：隐藏更改为显示：无
试试这个代码

功能更改（obj）{
//警报（obj）；
var-selectBox=obj；
所选变量=selectBox.options[selectBox.selectedIndex]。值；
var retCustDetails=document.getElementById（“retCustDetails”）；
var tradeCustDetails=document.getElementById（“tradeCustDetails”）；
如果（所选=='ret'）{
retCustDetails.style.display=“block”；
tradeCustDetails.style.display=“无”；
}
否则{
retCustDetails.style.display=“无”；
tradeCustDetails.style.display=“block”；
}
}
下订单
你的细节
客户类型：
客户类型？
顾客
贸易
名字
姓
公司名称
将此作为参数传递给change（）方法。还可以按如下所示更改if条件
if(selected === 'ret'){
//...
}

因为您得到了所选的值，所以它会给出“ret”或“trd”
将可见性：隐藏更改为显示：无
试试这个代码

功能更改（obj）{
//警报（obj）；
var-selectBox=obj；
所选变量=selectBox.options[selectBox.selectedIndex]。值；
var retCustDetails=document.getElementById（“retCustDetails”）；
var tradeCustDetails=document.getElementById（“tradeCustDetails”）；
如果（所选=='ret'）{
retCustDetails.style.display=“block”；
tradeCustDetails.style.display=“无”；
}
否则{
retCustDetails.style.display=“无”；
tradeCustDetails.style.display=“block”；
}
}
下订单
你的细节
客户类型：
客户类型？
顾客
贸易
名字
姓
公司名称
这是另一种方法。这也行得通。干杯
<script>
jQuery(function($) {
    $('#show').change(function(){
        var val = $(this).val();
        if( val == 'ret') {
            $('#retCustDetails').show();
            $('#tradeCustDetails').hide();
        } else if(val == 'trd') {
            $('#tradeCustDetails').show();
            $('#retCustDetails').hide();
        } else {
            $('#tradeCustDetails').hide();
            $('#retCustDetails').hide();
        }
    }); 
});
</script>

<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
</select>

<div id="retCustDetails" class="custDetails" style="display:none">
    Forename <input type="text" name="forename" id="forename" />
    Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
    Company Name <input type="text" name="companyName" id="companyName" />
</div>


jQuery（函数（$）{
$（'#show'）。更改（函数（）{
var val=$（this.val（）；
如果（val=='ret'）{
$（'#retCustDetails'）.show（）；
$（“#tradeCustDetails”）.hide（）；
}否则如果（val='trd'）{
$（“#tradeCustDetails”）.show（）；
$（“#retCustDetails”）.hide（）；
}否则{
$（“#tradeCustDetails”）.hide（）；
$（“#retCustDetails”）.hide（）；
}
}); 
});
下单
你的细节
客户类型：
客户类型？
顾客
贸易
名字
姓
公司名称
这是另一种方法。这也行得通。干杯
<script>
jQuery(function($) {
    $('#show').change(function(){
        var val = $(this).val();
        if( val == 'ret') {
            $('#retCustDetails').show();
            $('#tradeCustDetails').hide();
        } else if(val == 'trd') {
            $('#tradeCustDetails').show();
            $('#retCustDetails').hide();
        } else {
            $('#tradeCustDetails').hide();
            $('#retCustDetails').hide();
        }
    }); 
});
</script>

<h2>Place order</h2>
Your details
Customer Type: <select id="show" name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
</select>

<div id="retCustDetails" class="custDetails" style="display:none">
    Forename <input type="text" name="forename" id="forename" />
    Surname <input type="text" name="surname" id="surname" />
</div>
<div id="tradeCustDetails" class="custDetails" style="display:none">
    Company Name <input type="text" name="companyName" id="companyName" />
</div>


jQuery（函数（$）{
$（'#show'）。更改（函数（）{
var val=$（this.val（）；
如果