显示/隐藏下拉菜单选项取决于另一个下拉菜单选择

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条件将隐藏该选项，但是再次，

第二，如果检查发送回else语句，并再次设置显示属性块，依此类推。

您可以只在条件检查之前为所有选项显示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();
});

Answer 2

第一个建议：保留不同的选择框，然后根据选择隐藏和显示，原因是选项可能不会在不同的浏览器中隐藏和显示

第二个建议：使用选项组，可能有助于显示和隐藏特定类别的东西。

Answer 3

你可以试试这个

 $(document).ready(function() { $("#type").change(function () { $("#grouping_type").children("option").show(); $("#grouping_type option[value='"+ $('#type').val() +"']").hide(); }); }); 

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

我想，您有完整的答案:)。