過濾基於另一個不工作

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

    }); 
}); 

請注意，代碼僅用於示例目的，未經任何測試。