嵌套下拉列表：取决于值

Question

我有两个带有值的下拉列表。当我在第一个中选择一个值时，我想在第二个中返回具有相同所选值的元素。第二个列表取决于第一个列表的选择。我怎么能这样做？

<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-attribute 以使选项无法选择。

编辑

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

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

这将每次选择第一个下拉列表中的某些内容时，禁用第二个下拉列表中的所有选项并重新启用第二个下拉列表中的所有选项，data-group-attribute 对应于第一个下拉列表中选定的value .