Question

myParameters

根据上面的代码，我可以从下拉列表中获取选项值，但是当选择任何值时，如何获取所选组的值。例如。如果有人选择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);组我需要其组值WKS-FINGER1而不是选项值，反之亦然。

Answer 1

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 2

如果我已经正确理解你需要访问onChange回调中的父选项组，如documentation所述：

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

请参阅example

Answer 3

您可能需要查看documentation的“进一步示例”部分中的最后一个示例（向下滚动到本节中的最后一个示例）。此示例限制特定选项组中所选选项的数量。在onChange选项中，选项组是从更改的选项派生的 - 这是您从单击/更改选项中派生选项组标签的有趣部分：

<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')而不是类，并将剩余的代码替换为您要对从单击的选项派生的组标签所做的任何操作。

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

3 个答案: