How can I hide/show options on the fly with bootstrap-multiselect?

Question

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)'
    });
});

Pram

I suspect you are going to have to actually REMOVE the <option> elements before refreshing the queueIds multi-select. – Stover

Can you provide HTML markup of this as well or a fiddle. – Paraboloid

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). – Stover

Answer 1

Edited for default none selected: Example shown in the following fiddler (I've trimmed it down to a base example for clarity): https://jsfiddle.net/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;}

Malapert

The fiddler is not working as expected. When I select One from the first menu, I am expecting only One* to stay on the second menu. But that isn't happening. – Pram

@MikeA updated example so it defaults to nothing selected in the second dropdown. Just need to add the disabled property initial setup of the list then everything flows as expected, apologies for the oversight. – Malapert

Thank you for the answer. I don't want to disable all by default. I slightly changed your fiddler to do exactly what I am looking for, let me know if you see a better/nicer way to write it... here is the updated fiddler jsfiddle.net/m6uuL53w/7 – Pram

@MikeA I am definitely going to block off some time tomorrow to check it out, when I initially researched your question I found a ton of people with this exact request but no real answers so it's pretty cool to be able to hash this out. – Malapert

Answer 2

https://jsfiddle.net/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.

Paraboloid

Props for writing up a solution for Mike! You may want to copy/clone the items you are removing lest they be unavailable should the user re-select one of the other groups. – Stover

Not sure what you mean, I can check 1, uncheck 1 and check 1 again and the options show hide show as expected. Like I said, though, not exactly production ready, but should show him the basis of what he wants to do no? Do you mean just change line 1 to $('#queues option').clone()? – Paraboloid

Oops, I see that bit at the top now. Missed that earlier and only saw the .remove() call. Sorry! – Stover