CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-multiselect
Srinivas Gadilli
Srinivas Gadilli

Reputation: 342

How to get opt group values in bootstrap-multiselect

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.

Upvotes: 3

Views: 6028

Answers (3)

David Stutz
David Stutz

Reputation: 2638

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

Upvotes: 2

Nofi
Nofi

Reputation: 2175

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

Upvotes: 3

pythagor
pythagor

Reputation: 316

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

Upvotes: 1

Related Questions