Question

我正在使用bootstrap-multiselect通过两个关键菜单为用户提供出色的控制器。我的第一个菜单名为groups，另一个名为queues。队列中的每个选项都有一个HTML5数据属性（即data-group =＆＃34; X＆＃34;，其中X是一个组值）

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

在确定需要隐藏/显示的队列/项目后，我尝试使用.hide()和.addClass('hidden')扩展名。然后我尝试使用.removeClass('hidden')和$(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)' }); });方法，但没有任何方法可以帮助我。

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

这是我的代码

summary_hook = tf.train.SummarySaverHook(
    save_secs=2,
    output_dir=MODEL_DIR,
    summary_op=tf.summary.merge_all())

# ...

classifier.train(
    input_fn,
    steps=1000,
    hooks=[summary_hook])

Answer 1

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

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

示例HTML：

Note

Jquery的：

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

只是一小撮CSS：

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

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

这不是我如何准确地保留生产代码，而是告诉您它是如何工作的。

基本上，循环，检查，改变DOM，并重建多选。我想这就是你想要的。

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

2 个答案: