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-property display设置为none来隐藏选项，这是jQuery的$.hide()函数所做的。或者，您可以在元素（disabled）上设置$.attr('disabled', 'disabled') - 属性，以使选项无法选择。

修改

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

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

每次选择第一个下拉菜单中的内容时，都会停用第二个下拉菜单中的所有选项，并使用与所选data-group对应的value - 属性重新启用第二个下拉列表中的所有选项从第一次下拉开始。

嵌套下拉列表：依赖值

1 个答案: