Jquery заселить OPTGROUP для второго переключателя динамически

Question

У меня есть очень длинный список опций в два множественных выборе коробки, я хочу, чтобы заполнить динамически варианты select_B на основе select_A, например:

I множественного выбор OPT1 и ОРТ2 от select_A, select_B покажет варианты, которые являются OPTGROUP только с id=sub1 и id=sub2, если я отменить opt1 и выберите opt3 из select_A, 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> 

У меня уже есть решение для сокрытия OPTGROUP в Chrome и IE от here:

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