Question

我正在为select元素使用Fast select jQuery插件。有没有办法将选择列表中的所有项目或删除列表功能中的所有项目添加到多个选择输入？

这是多选输入的代码

<select class="multipleSelect" multiple name="language">
    <option value="All">Select ALLoption>
    <option value="Bangladesh">Bangladesh</option>
    <option selected value="Barbados">Barbados</option>
    <option selected value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    ...
</select>

和选择输入的代码

$('.multipleSelect').fastselect();

Answer 1

您可以独立于插件执行此操作：

$('.multipleSelect').change(e => {
  const _self = $(e.target); /* cache target */
  const _selfVal = _self.val()[0]; /* cache value */
  if (_selfVal === "All") { /* if All, select all */
    _self.find('option').prop('selected', true);
  } else if (_selfVal === "Remove") { /* if Remove, select none */
    _self.find('option').prop('selected', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multipleSelect" multiple name="language">
    <option value="All">Select ALL</option>
    <option value="remove">Remove ALL</option>
    <option value="Bangladesh">Bangladesh</option>
    <option selected value="Barbados">Barbados</option>
    <option selected value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
</select>

Answer 2

使用Common div像下面的代码一样包装select元素，然后动态地将plugin类的select下拉列表中的每个元素单击到所有选项。单击“ x”按钮以删除所有选定的值。包装程序是为了防止其他快速选择元素在同一页面中触发，您可以在单击任何复选标记或任何元素时分别调用以下脚本

<div id="fastSelectWrapper">
    <select class="multipleSelect" multiple name="language">
    <option value="All">Select ALL</option>
    <option value="Bangladesh">Bangladesh</option>
    <option selected value="Barbados">Barbados</option>
    <option selected value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    </select>
    </div>
 <script>
 // to select all 
 $("#fastSelectWrapper .fstResultItem").click();
  // to remove all 
 $("#fastSelectWrapper .fstChoiceRemove").click();
 </script>

使用fastselect js'全选'和'全删'

2 个答案: