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