Question

我想尝试的是，我想根据首次下拉选择显示第二个下拉选项 -

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

但它不起作用，它做了一些奇怪的行为。

有人可以帮忙吗？

Answer 1

实际上你的嵌套if-else组合是错误的。如果我从类型组合中选择“一个”，请检查一下。第一个if条件，你检查值==“1”将隐藏选项，但再次，

如果检查发送回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

你可以试试这个 -

＆＃13;

anchors.fill: parent

＆＃13;

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

＆＃13;

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

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

3 个答案: