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

Question

我正在使用bootstrap-multiselect为用户提供两个关键菜单上的出色控制器。我的第一个菜单被称为groups和其他被称为queues. 队列中的每个选项都有一个 HTML5 数据属性（即 data-group="X"，其中 X 是组值）

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

在确定需要隐藏/显示的队列/项目后，我尝试使用.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

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

不需要任何手动凌乱的 DOM ADD/REMOVE 操作。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>

查询：

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