Hi i am using bootstrap-multiselect js.
i am able get option values and group values by using onChange Event of bootstrap-multiselect js. i have another drop down called hrs which is basic html drop down box.
Now my requirement is when i change hrs drop down box i have to get this drop down value and bootstrap-multiselect drop down values also.
HTML CODE:
$(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"];
}
});
});<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>Try to add change event listener to #hrs-
$("#hrs").on("change",function(){
var sel1 = $(this).find(":selected").val();
var sel2 = getSelectValues(document.getElementById('myid')); // for multi select options
});
This will get you values for both drop down menus on change of select with id hrs.
I have used the function getSelectValues to get selected values from multi select box from this answer.
Please refer this fiddle.