javascript - 显示/隐藏下拉选项取决于另一个下拉选项

Question

我正在尝试，我想显示基于第一个下拉选择的第二个下拉选项-

$(document).ready(function(){
    $("#type").change(function(){
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="1"){
                $("#grouping_type option[value=" + 1 + "]").hide();
                $("#grouping_type option[value=" + 3 + "]").hide();
                $("#grouping_type option[value=" + 4 + "]").hide(); 
            }
            else{
                $("#grouping_type option[value=" + 1 + "]").show();
                $("#grouping_type option[value=" + 3 + "]").show();
                $("#grouping_type option[value=" + 4 + "]").show();
            }
            if($(this).attr("value")=="2"){
                $("#grouping_type option[value=" + 1 + "]").hide();
                $("#grouping_type option[value=" + 5 + "]").hide(); 
            }
            else{
              $("#grouping_type option[value=" + 1 + "]").show();
              $("#grouping_type option[value=" + 5 + "]").show();
            }
            if($(this).attr("value")=="3"){
                $("#grouping_type option[value=" + 2 + "]").hide();
                $("#grouping_type option[value=" + 3 + "]").hide();
                $("#grouping_type option[value=" + 4 + "]").hide();
                $("#grouping_type option[value=" + 5 + "]").hide();
            }
            else{
                $("#grouping_type option[value=" + 2 + "]").show();
                $("#grouping_type option[value=" + 3 + "]").show();
                $("#grouping_type option[value=" + 4 + "]").show();
                $("#grouping_type option[value=" + 5 + "]").show();  
            }
        });
    }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="type">
    <option value="none">Select Any One</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

<br>
Dependable Dropdown Show/Hide
<br>

<select id="grouping_type">
    <option value="none">Select Group Type</option>
    <option value="1">group_1</option>
    <option value="2">group_2</option>
    <option value="3">group_3</option>
    <option value="4">group_4</option>
    <option value="5">group_5</option>
</select>

但它不起作用，它的行为很奇怪。

有人可以帮忙吗？

Answer 1

实际上，您的嵌套 if-else 组合是错误的。让我们检查一下，我是否从类型组合中选择“一个”。您检查 value == "1"的第一个 if 条件将隐藏该选项，但再次，

第二个if检查发送回else语句及其再次设置显示属性 block 等等。

您可以在条件检查之前为所有选项显示 set display:block(.show()) ，然后为特定选项设置 display:none(.hide()) 。

我更新了你的代码。这是

$(document).ready(function(){
    $("#type").change(function(){
        $(this).find("option:selected").each(function(){
             $("#grouping_type option[value=" + 1 + "]").show();
             $("#grouping_type option[value=" + 2 + "]").show();
             $("#grouping_type option[value=" + 3 + "]").show();
             $("#grouping_type option[value=" + 4 + "]").show();
             $("#grouping_type option[value=" + 5 + "]").show();
            if($(this).attr("value")=="1"){
                $("#grouping_type option[value=" + 1 + "]").hide();
                $("#grouping_type option[value=" + 3 + "]").hide();
                $("#grouping_type option[value=" + 4 + "]").hide(); 
            }
            else if($(this).attr("value")=="2"){
                $("#grouping_type option[value=" + 1 + "]").hide();
                $("#grouping_type option[value=" + 5 + "]").hide(); 
            }
            else if($(this).attr("value")=="3"){
                $("#grouping_type  option[value=" + 2 + "]").hide();
                $("#grouping_type  option[value=" + 3 + "]").hide();
                $("#grouping_type  option[value=" + 4 + "]").hide();
                $("#grouping_type  option[value=" + 5 + "]").hide();
            }
        });
    }).change();
});