过滤基于另一个不工作

Question

select元素我有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下的值。

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

Answer 1

如果您DDL1是select元素，那么原因可能是optgroup和option元素以一种特殊的方式通过浏览器处理，它可能无法通过CSS show/hide他们（jQuery的做什么）。

尝试动态地插入匹配optgroup s这样的东西。

$(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; 
     } 

    }); 
}); 

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