i have situation where am trying to use both onclick and onCheckall events.
Issue:- i am using this plugin for dropdowns with multi-select ( and select all option as all) .
without using onCheckall
Now the issue is if there is only one item in the dropdown with select all, so when i select that one device, it automatically checks the select all, and when it does the onclick event doesn't fire.
with using onCheckall
so when i select that one device, it automatically checks the select all, and thus firing both the onclick and oncheckall.
I am trying to dynamically populate a 2nd dropdown menu based on the first, but "with using onCheckall" .it's generating duplicate select options since its firing both the events.
$(function () {
$('#model').multipleSelect({
filter : true,
placeholder: 'Select Models',
maxHeight: 140,
showClear: true,
filterPlaceholder: 'Search for Models',
filterAcceptOnEnter: true ,
// selectAll: false,
// fires when user manually selects options
onClick: function (){
// var chassis_model_select = document.getElementById("chassis_model");
// for (i=0; i < chassis_model_select.options.length; i++){
// chassis_model_select.options.remove(i);
// }
// console.log($('#model').multipleSelect('getSelects'));
var models = $('#model').multipleSelect('getSelects');
// console.log(models);
for (i=0; i < models.length; i++){
if (models[i] == "ios"){
document.getElementById("chassis-model").style.display = "table-row";
var chassis_models_menu = document.getElementById("chassis_model");
var req = new XMLHttpRequest();
req.open('POST', '/getchassismodels/', true);
req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
req.send(`devicetype=${models[i]}`)
req.onreadystatechange = function () {
if(req.readyState === XMLHttpRequest.DONE && req.status === 200) {
var response = JSON.parse(req.responseText);
// console.log(response)
// Adding a Select All option
// var model_select = document.getElementById("model");
// var opt = document.createElement('option');
// opt.appendChild(document.createTextNode("Select All"));
// opt.value = "all";
// model_select.appendChild(opt);
// Adding all the options dynamically relevent to the device type selected from the preivious options
for (i = 0; i < response.length; i++){
var opt = document.createElement('option');
opt.appendChild( document.createTextNode(response[i]));
opt.value = response[i];
chassis_models_menu.appendChild(opt);
$('#chassis_model').multipleSelect('refresh');
}
}
}
}
}
},
// fires when user selects select all
onCheckAll: function(){
var models = $('#model').multipleSelect('getSelects')
console.log(models)
var chassis_models_menu = document.getElementById("chassis_model");
// var already_existing_options = $('#chassis_model').multipleSelect('getSelects')
// console.log(already_existing_options)
for (i=0; i < models.length; i++){
if (models[i] == "ios"){
document.getElementById("chassis-model").style.display = "table-row";
var req = new XMLHttpRequest();
req.open('POST', '/getchassismodels/', true);
req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
req.send(`devicetype=${models[i]}`)
req.onreadystatechange = function () {
if(req.readyState === XMLHttpRequest.DONE && req.status === 200) {
var response = JSON.parse(req.responseText);
// console.log(response)
// Adding a Select All option
// var model_select = document.getElementById("model");
// var opt = document.createElement('option');
// opt.appendChild(document.createTextNode("Select All"));
// opt.value = "all";
// model_select.appendChild(opt);
// Adding all the options dynamically relevent to the device type selected from the preivious options
for (i = 0; i < response.length; i++){
var opt = document.createElement('option');
opt.appendChild( document.createTextNode(response[i]));
opt.value = response[i];
// only add options if they are don't exists already
// This will give error in javascript console..possible bug in the plugin
// chassis_models_menu.removeChild(opt);
chassis_models_menu.appendChild(opt);
$('#chassis_model').multipleSelect('refresh');
}
}
}
}
}
},
onUncheckAll: function(){
document.getElementById("chassis-model").style.display = "none";
var chassis_model_select = document.getElementById("chassis_model");
for (i=0; i < chassis_model_select.options.length; i++){
chassis_model_select.options.remove(i);
}
}
})
i have situation where am trying to use both onclick and onCheckall events. Issue:- i am using this plugin for dropdowns with multi-select ( and select all option as all) .
without using onCheckall Now the issue is if there is only one item in the dropdown with select all, so when i select that one device, it automatically checks the select all, and when it does the onclick event doesn't fire.
with using onCheckall so when i select that one device, it automatically checks the select all, and thus firing both the onclick and oncheckall.
I am trying to dynamically populate a 2nd dropdown menu based on the first, but "with using onCheckall" .it's generating duplicate select options since its firing both the events.
$(function () {
});
$(function () { $('#chassis_model').multipleSelect({ filter : true, placeholder: 'Select Models', maxHeight: 140, showClear: true, filterPlaceholder: 'Search for Models', filterAcceptOnEnter: true ,
});