How to get opt group values in bootstrap-multiselect

Question

var data = [
 {
  "label": "WKS-FINGER1",
  "children": [
   {
    "label": "WKS1",
    "value": "WKS1"
   },
   {
    "label": "WKS2",
    "value": "WKS2"
   },
   {
    "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 selectionData = [];
                     $('#myid option:selected').each(function() {

                         selectionData.push([$(this).val() , $(this).data('order') ]);
                }); 
                     alert(selectionData);

 }
         });
                      $('#myid').multiselect('dataprovider', data);

As per the above code I am able to get the option values from drop down but how to get the values of the selected groups also when any value is selected. For eg . if somebody selects WKS-FINGER1 group I need its group value WKS-FINGER1 and not the option value and vice versa.

score 3 · Accepted Answer · answered Apr 19 '16 at 09:45

JsFiddle Demo

Hope this is what you are looking for.

<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"];
                }
            });
        });

thanks it works for me. why group label not having checkbox – Srinivas Gadilli Apr 20 '16 at 05:31 — Srinivas Gadilli, Apr 20 '16 at 05:31
This is extremely under-rated. +1 – Pogrindis Sep 26 '18 at 16:34 — Pogrindis, Sep 26 '18 at 16:34

score 2 · Answer 2 · answered Apr 19 '16 at 12:20

You might want to check the last example in the Further Examples section of the documentation (scroll down to the last example in this section). This example restricts the number of selected options within a specific group of options. In the onChange option, the option group is derived from the changed option(s) - this is the interesting part for you to deriv the option group label from the clicked/changed option:

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-optgroup-limit').multiselect({
            onChange: function(options, checked) {
                var $option = $(options);
                // This example works onyl for selection one option a time, has to be adapted to your case ...
                if ($option.length == 1) {
                    // This is the important part for you: get the parent optgroup:
                    var $group = $option.parent('optgroup')
                    // Here, the properties of the optgroup can be checked ... 
                    if ($group.hasClass('group-1')) {
                        var $options = $('option', $group);
                        $options = $options.filter(':selected');

                        if (checked && $options.length > 2) {
                            alert('Cannot select more than 2 elements in this group!');
                            $("#example-optgroup-limit").multiselect('deselect', $option.val());
                        }
                    }
                }
            }
       });
    });
</script>
<div class="btn-group">
    <select id="example-optgroup-limit" multiple="multiple">
        <optgroup class="group-1" label="Group 1">
            <option value="1-1">Option 1.1</option>
            <option value="1-2">Option 1.2</option>
            <option value="1-3">Option 1.3</option>
        </optgroup>
        <optgroup class="group-2" label="Group 2">
            <option value="2-1">Option 2.1</option>
            <option value="2-2">Option 2.2</option>
            <option value="2-3">Option 2.3</option>
        </optgroup>
    </select>
</div>

You can adapt the example to query $group.attr('label') instead of the class and replace the remaining code with whatever you want to do with the group's label you just derived from the clicked option(s).

As per the documentation `enableClickableOptGroups: true` should give a check box to groups in drop down box but as per the [fiddle](https://jsfiddle.net/Nofiden/b8wsxr89/4/) I am not getting the checkbox. — Srinivas Gadilli, Apr 20 '16 at 07:09

score 1 · Answer 3 · answered Apr 19 '16 at 07:11

1

If I've understood correctly you need to access parent options group inside onChange callback as described in the documentation:

var $option = $(option);
var $group = $option.parent('optgroup');
alert($group[0].label);

See the example

answered Apr 19 '16 at 07:11

pythagor

306
2
5

Here is my [fiddle](https://jsfiddle.net/b8wsxr89/1/) I should be able to get the get the group when the group is selected and I need to maintain a data set that keeps the values of only selected datasets. – Srinivas Gadilli Apr 19 '16 at 07:56

How to get opt group values in bootstrap-multiselect

3 Answers3