Question

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

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

HTML CODE：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试将更改事件侦听器添加到#hrs -

$("#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的多选框中获取所选值。

请参阅此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组值

2 个答案: