javascript - 根据另一个不工作的元素过滤选择元素

Question

我有这样的JS:

$(document).ready(function () {

    $("#DDL1").change(function () {
        var thisValue = $(this).val();

        var $optGroups = $("#DDL2 optgroup");
        $optGroups.hide();

        switch (thisValue) {
            case "11":
                alert(thisValue);
                $optGroups.filter("[label='label1']").show();
                break;
        }

    });
});

基本上，基于第一个 ddl 的选择..我想过滤第二个 ..

当我运行这个时，thisValue = 11，这就是我想要的。但是 $optGroups 仍然显示所有可选值。而我只想要 optgroup 下标签为 label1 的值待展示。

对我可能做错了什么有任何解释吗？

Answer 1

如果您的 DDL1 是 select 元素，那么原因可能是浏览器以特殊方式处理 optgroup 和 option 元素，并且可能无法通过 CSS 来显示/隐藏它们(jQuery 的作用)。

尝试使用类似的内容动态插入匹配的optgroup。

$(document).ready(function () {

    // grab out the initial optgroups from the select and keep them in memory
    var $optGroups = $("#DDL2 optgroup").detach();

    $("#DDL1").change(function () {
        var thisValue = $(this).val();

        // remove all the current optgroups from the select
        $("#DDL2 optgroup").detach();

        switch (thisValue) {
            case "11":
                alert(thisValue);
                // append the matching optgroups to the select
                $optGroups.filter("[label='label1']").appendTo($("#DDL2"));
                break;
        }

    });
});

请注意，该代码仅用于示例目的，未经任何方式测试。