如何在 bootstrap-multiselect 中获取 opt 组值

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.例如。如果有人选择 WKS-FINGER1 组，我需要它的组值 WKS-FINGER1 而不是选项值，反之亦然。

Answer 1

如果我理解正确，您需要按照 documentation:

中所述访问 onChange 回调中的父选项组

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

见example

Answer 2

JsFiddle Demo

希望这就是您要找的。

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

Answer 3

您可能想查看 documentation 的更多示例部分中的最后一个示例（向下滚动到本节中的最后一个示例）。此示例限制特定选项组中所选选项的数量。在 onChange 选项中，选项组派生自已更改的选项 - 这是您从 clicked/changed 选项派生选项组标签的有趣部分：

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

您可以调整示例以查询 $group.attr('label') 而不是 class 并将剩余的代码替换为您想要对刚刚从单击的选项派生的组标签执行的任何操作.

如何在 bootstrap-multiselect 中获取 opt 组值

How to get opt group values in bootstrap-multiselect

javascript

jquery

twitter-bootstrap

bootstrap-multiselect