How to get opt group values in bootstrap-multiselect from outside element

Question

Hi i am using bootstrap-multiselect js. i am able get option values and group values by using onChange Event of bootstrap-multiselect js. i have another drop down called hrs which is basic html drop down box.

Now my requirement is when i change hrs drop down box i have to get this drop down value and bootstrap-multiselect drop down values also.

HTML CODE:

     $(document).ready(function() {
            $(function() {
                var data = [{
                    "label": "WKS-FINGER1",
                    "children": [{
                        "label": "WKS1",
                        "value": "WKS1"
                    }, {
                        "label": "WKS2",
                        "value": "WKS2"
                    }]
                }, {
                    "label": "WKS-FINGER",
                    "children": [{
                        "label": "WKS3",
                        "value": "WKS3"
                    }]
                }, {
                    "label": "WKS-FINGER2",
                    "children": [{
                        "label": "WKS4",
                        "value": "WKS4"
                    }]
                }];
    
                $('#myid').multiselect({
                    enableClickableOptGroups: true,
                    buttonWidth: '200px',
                    onChange: function(option, checked, selected, element) {
                        var temp = jQuery.extend(true, {}, newData);
                        var selectionData = [];
         var selectionGroup = [];
                        $('#myid option:selected').each(function(e) {
                            for (n in newData) {
                                for (d in newData[n]) {
                                    if (newData[n][d].value == $(this).val()) {
                                        for (i in temp[n]) {
                                            if (temp[n][i].value == $(this).val())
                                                temp[n].splice(i, 1);
                                        }
    
                                    }
                                }
    
                            }
                            selectionData.push($(this).val());
                        });
    
                        for (t in temp) {
                            if (temp[t].length == 0) {
                                selectionGroup.push(t);
                            } else {
                                for (tt in newData[t]) {
                                    if (newData[t][tt] == temp[t][tt]) {
                                        selectionData.push(newData[t][tt]["value"]);
                                    }
                                }
                            }
    
                        }
                        console.log("Group : " + selectionGroup);
         console.log("Data : " +selectionData);
         $("#output").html("Group : " + selectionGroup + "<br>Data : " +selectionData);
         //alert("Group : " + selectionGroup + "\nData : " +selectionData);
    
                    }
                });
                var newData = {};
                $('#myid').multiselect('dataprovider', data);
                var clonedData = jQuery.extend(true, {}, data);
                for (i in clonedData) {
                    newData[clonedData[i]["label"]] = clonedData[i]["children"];
                }
            });
        });

<style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js">
</script>
<body>
         <select id="hrs">
           <option value="1">1</option>
           <option value="2">2</option>
        </select>
         <div id="multiselection">
      <select id="myid" multiple="multiple">
      </select>
     </div>
         <span id="output"></span>
    </body>

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

Try to add change event listener to #hrs-

$("#hrs").on("change",function(){
   var sel1 = $(this).find(":selected").val();
   var sel2 = getSelectValues(document.getElementById('myid')); // for multi select options
});

This will get you values for both drop down menus on change of select with id hrs.

I have used the function getSelectValues to get selected values from multi select box from this answer.

Please refer this fiddle.

edited May 23 '17 at 10:33

Community

1
1

answered May 09 '16 at 05:08

Developer107

1,728
2
14
24

Hi $('#myid').find(":selected").val(); is giving only first value from list of selected values.Please check once – Srinivas Gadilli May 09 '16 at 05:34

score 0 · Answer 2 · answered May 09 '16 at 05:51

<body>
     <div id="multiselection">
     <select id="myid" multiple="multiple">
     </select></div>
     <span id="output"></span>

</body>

        $(document).ready(function() {
            $(function() {
                var data = [{
                    "label": "WKS-FINGER1",
                    "children": [{
                        "label": "WKS1",
                        "value": "WKS1"
                    }, {
                        "label": "WKS2",
                        "value": "WKS2"
                    }]
                }, {
                    "label": "WKS-FINGER",
                    "children": [{
                        "label": "WKS3",
                        "value": "WKS3"
                    }]
                }, {
                    "label": "WKS-FINGER2",
                    "children": [{
                        "label": "WKS4",
                        "value": "WKS4"
                    }]
                }];

                $('#myid').multiselect({
                    enableClickableOptGroups: true,
                    buttonWidth: '200px',

                    onChange: function(option, checked, selected, element) {

                        var temp = jQuery.extend(true, {}, newData);

                        var selectionData = [];
                        var selectionGroup = [];
                        $('#myid option:selected').each(function(e) {
                            for (n in newData) {
                                for (d in newData[n]) {
                                    if (newData[n][d].value == $(this).val()) {
                                        for (i in temp[n]) {
                                            if (temp[n][i].value == $(this).val())
                                                temp[n].splice(i, 1);
                                        }

                                    }
                                }

                            }
                            selectionData.push($(this).val());
                        });

                        for (t in temp) {
                            if (temp[t].length == 0) {
                                selectionGroup.push(t);
                            } else {
                                for (tt in newData[t]) {
                                    if (newData[t][tt] == temp[t][tt]) {
                                        selectionData.push(newData[t][tt]["value"]);
                                    }
                                }
                            }

                        }
                        console.log("Group : " + selectionGroup);
                        console.log("Data : " + selectionData);
                        $("#output").html("Group : " + selectionGroup + "<br>Data : " + selectionData);
                        //alert("Group : " + selectionGroup + "\nData : " +selectionData);

                    }
                });
                var newData = {};
                $('#myid').multiselect('dataprovider', data);
                var clonedData = jQuery.extend(true, {}, data);
                for (i in clonedData) {
                    newData[clonedData[i]["label"]] = clonedData[i]["children"];
                }
            });
        });

@Aamir i did not see any answer in your answer.can you give jsbin example — Srinivas Gadilli, May 09 '16 at 06:29

How to get opt group values in bootstrap-multiselect from outside element

2 Answers2