javascript - 如何使用 bootstrap-multiselect 即时隐藏/显示选项？

Question

我正在使用 bootstrap-multiselect通过两个关键菜单为用户提供出色的 Controller 。我的第一个菜单叫做groups，其他的叫做queues。队列中的每个选项都有一个 HTML5 数据属性(即 data-group="X"，其中 X 是一个组值)

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

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

如何使用 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)'
    });
});

Answer 1

编辑为默认未选择:以下 fiddler 中显示的示例(为了清楚起见，我将其缩减为基本示例):https://jsfiddle.net/m6uuL53w/3/

不需要任何手动的凌乱 DOM 添加/删除操作。 Multiselect 将继承您放在原始列表中的禁用类，因此您只需要在设置禁用值并刷新列表后使用 css 定位它。让 multiselect 担心 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>

J查询:

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