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