[New Problem] Jquery populate optgroup based on first select box

[New Problem] Jquery populate optgroup based on first select box

Hi, my first ever jquery question right here, I need help in jquery-multiselect plugin to show optgroup's children based on the option from first multiple selectbox, here is what I currently stuck with jsfiddle.net/hsQjh/4

For instance, I picked option 1 - Distributor/Agent and 3 - TV Channel/Broadcaster from first box, I want the optgroup labeled with 1 - Distributor/Agent and 3 - TV Channel/Broadcaster to be populate, it's almost same act like this sample: jsfiddle.net/UNbvn/


  1. <head>
        <link href="jquery.multiSelect.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.multiSelect.js"></script>

        <script>
        function filter_A_Trigger(e){
            if($(e).attr('checked')=='checked'){

                // I want a script to run here to populate optgroup based on what is selected on first box

            }   
        }

        $(document).ready(function() {
       
            $("#A").multiSelect({
                selectAll: false,
                noneSelected: 'All',
                oneOrMoreSelected: '*'
            },
            filter_A_Trigger);

        });
        </script>
        </head>

        <body>

       
        <div>
        Main Activity:
        <select id="A" multiple="multiple" size="10" style="width:220px;">
            <option value=""></option>
            <optgroup label="Producer, Content Creation, Rights Holder">
                <option value="1 - Distributor/Agent" id="main1">1 - Distributor/Agent</option>
                <option value="2 - Producer/Production Company" id="main2">2 - Producer/Production Company</option>
            <optgroup label="Distribution Platforms">
                <option value="3 - TV Channel/Broadcaster" id="main3">3 - TV Channel/Broadcaster</option>
        </select>

        <br /><br />

        Sub    Activity:
        <select id="B" multiple="multiple" size="15" style="width:220px;">
            <optgroup label="1 - Distributor/Agent" id="sub1">
                <option value="1A - Music and Sound Libraries">1A - Music and Sound Libraries</option>
                <option value="1B - HD Digital Radio">1B - HD Digital Radio</option>
               
            <optgroup label="2 - Producer/Production Company" id="sub2">
                <option value="2A - Animation/Computer Graphics (CGI)">2A - Animation/Computer Graphics (CGI)</option>
                <option value="2B - Co Production">2B - Co Production</option>
                <option value="2C - Sub Production">2C - Sub Production</option>
               
            <optgroup label="3 - TV Channel/Broadcaster" id="sub3">
                 <option value="3A - Antennas, Transmitter and Towers">3A - Antennas, Transmitter and Towers</option>
                <option value="3B - Cable and Satellite">3B - Cable and Satellite</option>
               
        </select>
        </div>

        </body>






























































I had been spent plenty of time in this part but still not able to sort it out, I do need someone advance in jquery to give solution on this, your help would be greatly appreciated!