Javascript 基于另一个不工作的元素筛选选择元素

我有这样的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仍然显示所有可选值。。而我只希望显示标签为label1的optgroup下的值

关于我可能做错了什么有什么解释吗？

如果您的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;
        }

    });
});

---

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

如果DDL1是select元素，那么原因可能是浏览器以特殊方式处理optgroup和option元素，并且可能无法通过CSS显示/隐藏jQuery所做的事。我认为解决办法是暂时删除您不想显示的optgroup。@ZoltaánTamási好的，除了我想显示的标签之外，还有没有一种方法可以删除所有其他标签，而不必显式命名所有标签？啊，这很有效。你能解释一下为什么使用detach两次吗？首先我得到了初始的optgroup，所以我把它们都放在了内存中。每次更改时，我都必须清空select，因为它可以包含以前插入的optgroup。我可以使用empty或remove，但我暂时不确定它们是否有任何可能的副作用，例如remove可能会杀死一些事件处理程序或附加到它们的DOM数据，等等。。如果您只想将元素从其父元素移出，分离是最安全的方法。谢谢！有关于为什么某些浏览器不在选择元素上使用显示和隐藏的文档吗？