Question

我正在尝试根据所选的选项显示或隐藏div。选择Customer时，它应显示retCustDetails，当选择Trade时，它应显示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>

JS

function change(obj) {

    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var retCustDetails = document.getElementById("retCustDetails");
    var tradeCustDetails = document.getElementById("tradeCustDetails");

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

Answer 1

您的代码中几乎没有出现小错误，我已对其进行了更正以使其正常工作 -

<body>
<h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change(this)">
                <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>
<script>

function change(obj) {

    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var retCustDetails = document.getElementById("retCustDetails");
    var tradeCustDetails = document.getElementById("tradeCustDetails");

    if(selected == 'ret'){
        retCustDetails.style.display = "block";
        tradeCustDetails.style.display = "none";
    }
    else{
        retCustDetails.style.display = "none";
        tradeCustDetails.style.display = "block";
    }
}
</script>
			
			</body>

Answer 2

您在html中使用visibility:hidden，但在js中，您正在更改display媒体资源。将visibility:hidden更改为display:none。

使用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";
    }
}

Answer 3

这是另一种方法。这也有效。干杯！

<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>

Answer 4

将 this 作为参数传递给 change（）方法。同时更改if条件，如下所示

if(selected === 'ret'){
//...
}

因为您获得了所选值，它会提供“ret”或“trd”

将 tradeCustDetails visibility：hidden更改为display：none 试试这段代码。

  function change(obj) {
    //alert(obj);
    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var retCustDetails = document.getElementById("retCustDetails");
    var tradeCustDetails = document.getElementById("tradeCustDetails");
    if(selected === 'ret'){
        retCustDetails.style.display = "block";
        tradeCustDetails.style.display = "none";
    }
    else{
        retCustDetails.style.display = "none";
        tradeCustDetails.style.display = "block";
    }
}

<h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change(this)">
                <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="display:none">
                Company Name <input type="text" name="companyName" id="companyName" />
            </div>

希望这会对你有所帮助。

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

4 个答案: