Jquery populate optgroup for second selectbox dyna

Question

I have a very long list of options in two multiple select box, I want to populate dynamically the options for select_B based on select_A, for instance:

I multiple select opt1 and opt2 from select_A, select_B will show the options which is optgroup with id=sub1 and id=sub2 only, if I deselect opt1 and select opt3 from select_A, select_B will remove optgroup sub1 and remain sub2 and sub3, and so on with flexibility of control.

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

I already have a solution for hiding optgroup in Chrome and IE from 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>

Please help and thanks.

Answer 1

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