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

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

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.