嵌套下拉列表：取决于值

Question

我有两个带有值的下拉列表。当我在第一个中 select 一个值时，我想在第二个中 return 具有相同 selected 值的元素。第二个列表取决于第一个列表 selection。我该怎么做？

<div class="form-group">
    <label for="first">First list</label>
        <select id="first" class="form-control" role="listbox" onchange="filterList();">
            <option value="Select level 1" selected="selected">Select...</option>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
        </select>
</div>
<div class="form-group">
    <label for="second">Second list</label>
        <select id="second" class="form-control" role="listbox">
            <option value="Select level 2" data-group="Select" selected="selected">Select...</option>
            <option value="Option 1 - 1" data-group="Option 1">First list 1 - Element 1</option>
            <option value="Option 1 - 2" data-group="Option 1">First list 1 - Element 2</option>
            <option value="Option 2 - 1" data-group="Option 2">First list 2 - Element 1</option>
            <option value="Option 2 - 2" data-group="Option 2">First list 2 - Element 2</option>
        </select>
</div>

jQuery 脚本

function filterList(){

    var first = $("#first").find('option:selected').text(); // stores first list selected elements

    $("#option-container").children().appendTo("#second"); // moves <option> contained in #option-container back to their <select>

    var toMove = $("#second").children("[data-group!='"+first+"']"); // selects elements to move out

    toMove.appendTo("#option-container"); // moves elements in #option-container

    $("#second").removeAttr("disabled"); // enables select
};

Answer 1

您可以通过将 css-属性 display 设置为 none 来隐藏选项，这就是 jQuery 的 $.hide() 功能呢。或者您可以在元素 ($.attr('disabled', 'disabled')) 上设置 disabled 属性，使某个选项不可选择。

编辑

你可以做什么的一个小例子（虽然我还没有测试过）：

$('#first').change(function() {
    var value = $(this).val();
    $('#second').children().attr('disabled', 'disabled');
    $('#second').children('[data-group=' + value + ']').removeAttr('disabled');
});

这将在每次选择第一个下拉列表中的内容时，禁用第二个下拉列表中的所有选项并重新启用第二个下拉列表中的所有选项，并使用与所选 [=17] 相对应的 data-group-属性=] 来自第一个下拉菜单。

嵌套下拉列表：取决于值

Nested dropdown lists : depending values

html

jquery

dropdown