如何在bootstrap-multiselect中获取opt组值
[英]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. 如果有人选择WKS-FINGER1组我需要其组值WKS-FINGER1而不是选项值，反之亦然。
3 个解决方案
解决方案1
3 已采纳 2016-04-19 09:45:34
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"];
}
});
});
解决方案2
1 2016-04-19 07:11:37
If I've understood correctly you need to access parent options group inside onChange callback as described in the documentation : 如果我已经正确理解你需要访问onChange回调中的父选项组，如文档中所述：
var $option = $(option);
var $group = $option.parent('optgroup');
alert($group[0].label);
解决方案3
1 2016-04-19 12:20:59
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: 在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>
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). 您可以调整示例来查询$group.attr('label')而不是类，并将剩余的代码替换为您要对从单击的选项派生的组标签所做的任何操作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.