admin管理员组文章数量:1399966
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.
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.
3 Answers
Reset to default 3JsFiddle Demo
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"];
}
});
});
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:
<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).
If I've understood correctly you need to access parent options group inside onChange callback as described in the documentation:
var $option = $(option);
var $group = $option.parent('optgroup');
alert($group[0].label);
See the example
本文标签： javascriptHow to get opt group values in bootstrapmultiselectStack Overflow
版权声明：本文标题：javascript - How to get opt group values in bootstrap-multiselect - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744241367a2596804.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论