jQuery的填充OPTGROUP爲第二選擇框動態

Question

我有兩個多選框一個很長的選項列表，我要動態填充基於select_A爲select_B的選項，例如：

我多選OPT1和OPT2從select_A，select_B將顯示僅是OPTGROUP與id=sub1和id=sub2的選項，如果我取消OPT1和select_A選擇OPT3，select_B將刪除OPTGROUP sub1並保持sub2和sub3，等有控制的靈活性。

<select id="select_A" multiple="multiple" size="10"> 
    <optgroup label="group 1"> 
     <option value="opt1" id="main1">opt1</option> 
     <option value="opt2" id="main2">opt2</option> 
    <optgroup label="group 2"> 
     <option value="opt3" id="main3">opt3</option> 
</select> 

<select id="select_B" multiple="multiple" size="10"> 
    <optgroup label="opt1" id="sub1" style="display:none;"> 
     <option value="1A">1A</option> 
     <option value="1B">1B</option> 

    <optgroup label="opt2" id="sub2" style="display:none;"> 
     <option value="2A">2A</option> 
     <option value="2B">2B</option> 

    <optgroup label="opt3" id="sub3" style="display:none;"> 
     <option value="3A">3A</option> 
     <option value="3B">3B</option> 
</select> 

我已經從here隱藏在OPTGROUP Chrome和IE的解決方案：

<script> 
$(document).ready(function() { 
    $.fn.hideOptionGroup = function() { 
     $(this).hide(); 
     $(this).children().each(function(){ 
     $(this).attr("disabled", "disabled").removeAttr("selected"); 
    }); 

    $(this).appendTo($(this).parent()); 

    } 

    $.fn.showOptionGroup = function() { 
     $(this).show();  
     $(this).children().each(function(){ 
     $(this).removeAttr("disabled"); 
    }); 

     $(this).prependTo($(this).parent()); 
     $(this).parent().animate({scrollTop:0},0); 
    } 



    $("#sub1,#sub2").showOptionGroup(); 
    $("#sub1,#sub2").hideOptionGroup(); 
}); 
</script> 

請幫助和感謝。

Answer 1

看到這個：Sample

$("#select_A").change(function() { 
    $("#select_B").children("optgroup").children().prop("disabled", "disabled").prop("selected", false); 
    var arr = $(this).val(); 
    for (var i = 0; i < arr.length; i++) { 
     $("#select_B").children("optgroup[label=" + arr[i] + "]").children().prop("disabled",false).prop("selected", "selected"); 
    } 
    $("#select_B").focus(); 
});