I am using bootstrap-multiselect to give the user great controller over two key menus. My first menu is called groups and other called queues. Each option in the queues has an HTML5 data attribute (i.e. data-group="X", where X is a group-value)
When the user selects a option/group from the groups menu, I want to find and hide every queue/option in the queues menu where data-group is not equal to a selected group in the groups menu.
After identifying the queues/items that needs to be hidden/showing, I tried to use .show() and .hide() extensions. Then I tried to use .addClass('hidden') and .removeClass('hidden') methods, but nothing is working for me.
How can I show/hide items on the fly with bootstrap-multiselect?
Here is my code
$(function () {
var queueGroupIds = $('#QueueGroupIds');
var queueIds = $('#QueueIds');
queueGroupIds.multiselect({
nonSelectedText: 'Select group(s)',
onChange: function (option, checked, select) {
var groups = queueGroupIds.find('option:selected');
if (groups.length == 0) {
//When none of the groups are selected, show all queues!
queueIds.find('option').each(function (i, q) {
$(q).show();
});
}
var queueToDeselect = [];
//loop over every select option "if any are selected"
groups.each(function (index, grp) {
var group = $(grp);
// loop over every queue option
queueIds.find('option').each(function (i, q) {
var queue = $(q);
//id the data-group value == selected group show the item
if (queue.data('group') == group.val()) {
queue.show();
//this prints the value which should be showing
console.log('showing', queue.val());
} else {
queueToDeselect.push(queue.val());
queue.hide();
//this prints the value which should be hidden
console.log('hidding', queue.val());
}
});
});
//Delected all hidden queues
queueIds.multiselect('deselect', queueToDeselect);
queueIds.multiselect('refresh');
}
});
queueIds.multiselect({
nonSelectedText: 'Select queue(s)'
});
});
I am using bootstrap-multiselect to give the user great controller over two key menus. My first menu is called groups and other called queues. Each option in the queues has an HTML5 data attribute (i.e. data-group="X", where X is a group-value)
When the user selects a option/group from the groups menu, I want to find and hide every queue/option in the queues menu where data-group is not equal to a selected group in the groups menu.
After identifying the queues/items that needs to be hidden/showing, I tried to use .show() and .hide() extensions. Then I tried to use .addClass('hidden') and .removeClass('hidden') methods, but nothing is working for me.
How can I show/hide items on the fly with bootstrap-multiselect?
Here is my code
$(function () {
var queueGroupIds = $('#QueueGroupIds');
var queueIds = $('#QueueIds');
queueGroupIds.multiselect({
nonSelectedText: 'Select group(s)',
onChange: function (option, checked, select) {
var groups = queueGroupIds.find('option:selected');
if (groups.length == 0) {
//When none of the groups are selected, show all queues!
queueIds.find('option').each(function (i, q) {
$(q).show();
});
}
var queueToDeselect = [];
//loop over every select option "if any are selected"
groups.each(function (index, grp) {
var group = $(grp);
// loop over every queue option
queueIds.find('option').each(function (i, q) {
var queue = $(q);
//id the data-group value == selected group show the item
if (queue.data('group') == group.val()) {
queue.show();
//this prints the value which should be showing
console.log('showing', queue.val());
} else {
queueToDeselect.push(queue.val());
queue.hide();
//this prints the value which should be hidden
console.log('hidding', queue.val());
}
});
});
//Delected all hidden queues
queueIds.multiselect('deselect', queueToDeselect);
queueIds.multiselect('refresh');
}
});
queueIds.multiselect({
nonSelectedText: 'Select queue(s)'
});
});
-
I suspect you are going to have to actually REMOVE the
<option>elements before refreshing the queueIds multi-select. – Forty3 Commented Aug 2, 2017 at 21:50 - Can you provide HTML markup of this as well or a fiddle. – Leeish Commented Aug 2, 2017 at 21:55
-
Looked through the github repo for the code .... looks like you are going to have to fork it in order to get the functionality you want (unless you can go the route of physically removing the
<option>values which you do not want). – Forty3 Commented Aug 2, 2017 at 22:08
2 Answers
Reset to default 6 +50Edited for default none selected: Example shown in the following fiddler (I've trimmed it down to a base example for clarity): https://jsfiddle/m6uuL53w/3/
No need for any manual messy DOM ADD/REMOVE manipulation. Multiselect will carry over the disabled class you put on your raw list so you just need target it with css after you set the disabled values and refresh your list. Let multiselect worry about dom manipulation.
Example HTML:
<select id="one" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="two" multiple="multiple">
<option data-group="1" value="OneA" disabled >One A</option>
<option data-group="1" value="OneB" disabled>One B</option>
<option data-group="2" value="TwoA" disabled>Two A</option>
<option data-group="2" value="TwoB" disabled>Two B</option>
<option data-group="3" value="ThreeA" disabled >Three A</option>
</select>
Jquery:
$(document).ready(function() {
$('#one').multiselect({
onChange: function(element, checked) {
var opts = $('*[data-group="'+ element.val() +'"]');
if (checked === true) {
opts.prop('disabled', false).prop('selected', false);
}
else if (checked === false) {
opts.prop('disabled', true).prop('selected', false);
}
$("#two").multiselect('refresh');
}
});
$('#two').multiselect();
});
Just a pinch of CSS:
.multiselect-container > li.disabled { display:none;}
https://jsfiddle/ta1wvs3j/1/
//Because we alter the DOM, we need to save an instance of the original list
//There are many ways to do this, I chose an easy one
var globalClone = $('#queues option');
//Init the queues
$('#queues').multiselect({
nonSelectedText: 'Select queue(s)',
onChange: function (option, checked, select) {
}
});
//Init the groups
$('#groups').multiselect({
nonSelectedText: 'Select group(s)',
onChange: function (option, checked, select) {
//Store the list of selections in an array
var selections = $('#groups').val();
//Reset the queue to it's starting list so we can loop
$('#queues').html(globalClone);
//Look at each option
$('#queues option').each(function(){
//"includes" may not be widly suppoerted but there are other ways to see if a value is in an array
//Check to see if the data-group value is in the selections array, if it's not
if( selections.includes(String($(this).data('group'))) == false ){
//Remove the option from the DOM
$(this).remove();
}
});
//Rebuild, per the multiselect docs basically reinit the select. Nice we don't have to destroy and recreate.
$('#queues').multiselect('rebuild');
}
});
This isn't how I'd leave production code exactly but it shows you how it can work.
Basically, loop, check, alter DOM, and rebuild multiselect. I think this is what you want.