如何使用 bootstrap-multiselect 动态隐藏/显示选项？

我在用引导多选 http://davidstutz.github.io/bootstrap-multiselect/为用户提供对两个按键菜单的良好控制。我的第一个菜单叫做groups和其他称为queues。队列中的每个选项都有一个 HTML5 数据属性（即 data-group="X"，其中 X 是组值）

当用户从选项/组中选择groups菜单，我想找到并隐藏每个队列/选项queues菜单在哪里data-group不等于组菜单中选定的组。

在确定需要隐藏/显示的队列/项目后，我尝试使用.show() and .hide()扩展。然后我尝试使用.addClass('hidden') and .removeClass('hidden')方法，但没有什么对我有用。

我如何动态显示/隐藏项目引导多选 http://davidstutz.github.io/bootstrap-multiselect/?

这是我的代码

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

编辑为默认未选择： 以下小提琴手中显示的示例（为了清楚起见，我已将其精简为基本示例）：https://jsfiddle.net/m6uuL53w/3/ https://jsfiddle.net/m6uuL53w/3/

无需任何手动混乱的 DOM ADD/REMOVE 操作。多选将继承您放在原始列表中的禁用类，因此您只需在设置禁用值并刷新列表后使用 css 定位它。让多选担心 dom 操作。

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

只需一点CSS：

.multiselect-container > li.disabled { display:none;}