如何从外部元素获取 bootstrap-multiselect 中的 opt 组值

Question

您好，我正在使用 bootstrap-multiselect js。我可以通过使用 onChange bootstrap-multiselect js 事件来获取选项值和组值。我有另一个名为 hrs 的下拉菜单，这是基本的 html 下拉框。

现在我的要求是当我更改 hrs 下拉框时我必须获得此下拉值并且 bootstrap-multiselect 下拉值也.

HTML 代码：

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

Answer 1

尝试为 #hrs-

添加 change 事件侦听器

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

这将在更改 select 和 id hrs 时获取两个下拉菜单的值。

我使用函数 getSelectValues 从这个 answer.

的多个 select 框中获取 selected 值

请参考这个fiddle。

Answer 2

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

如何从外部元素获取 bootstrap-multiselect 中的 opt 组值

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

jquery

twitter-bootstrap

bootstrap-multiselect