Question

我使用 http://www.jqueryscript.net/form/Responsive-jQuery-Dual-Select-Boxes-For-Bootstrap-Bootstrap-Dual-Listbox.html

上的教程实现了双列表框

我必须实现的一个功能是清除整个双列表，并在点击按钮时使用另一组数据填充它。我怎样才能做到这一点？提前感谢任何建议。

首次填充列表：

var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();   
demo1.bootstrapDualListbox('refresh');

点击重置时清空所选列表：

var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();   
demo1.bootstrapDualListbox('destroy', true);

点击重置时重新填充列表：

var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox();   
demo1.bootstrapDualListbox('refresh');

执行此操作后，我只看到一个包含所有未选项目的框，另一个框显示所选项目已消失。

Answer 1

Map[String, AnyRef]

Answer 2

您可以通过在所有选项上调用prop('selected', false)取消选中所有选项，通过在所需选项上调用prop('selected', true)来选择所需选项，然后在bootstrapDualListbox('refresh', true)上调用DLB。

<form>
  <select multiple="multiple" size="10" name="duallistbox_demo1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3" selected="selected">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6" selected="selected">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
    <option value="option0">Option 10</option>
  </select>
  <button type="button" onclick="dlb_repopulate(['option2']);">Population 1</button>
  <button type="button" onclick="dlb_repopulate(['option1', 'option2', 'option9']);">Population 2</button>
  <button type="button" onclick="dlb_repopulate(['option1', 'option6', 'option3', 'option8', 'option7']);">Population 3</button>
  <button type="button" onclick="dlb_updateopts([['option11', 'Opt 11'], ['option12', 'Opt 12']]);">Update 1</button>
  <button type="button" onclick="dlb_updateopts([['option24', 'Opt 24'], ['option33', 'Opt 37']]);">Update 2</button>
</form>
<script>
  $('[name=duallistbox_demo1]').bootstrapDualListbox();
  function dlb_repopulate (new_population) {
    $('[name=duallistbox_demo1] option').prop('selected', false);
    new_population.forEach(function(option) {
      $('[name=duallistbox_demo1] option[value="'+option+'"]').prop('selected', true);
    });
    $('[name=duallistbox_demo1]').bootstrapDualListbox('refresh', true);
  }
  function dlb_updateopts (new_opts) {
    $('[name=duallistbox_demo1]').empty();
    new_opts.forEach(function (opt) {
      $('[name=duallistbox_demo1]').append($('<option     value="'+opt[0]+'">'+opt[1]+'</option>'));
    });
    $('[name=duallistbox_demo1]').bootstrapDualListbox('refresh', true);
  }
</script>

双列表框如何重置列表

2 个答案: