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

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