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