处理Bootstrap Multi select下拉列表的All All和Deselect All选项

编程问答 2022-08-15

问题描述

我在HTML页面中添加了2个引导多选下拉列表。

＃drop1 

<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="selectpicker w-100" 
  id="drop1" data-actions-Box="true">
  <option>Val1</option>
  <option>Val2</option>
  <option>Val3</option>
</select>

＃drop2 

<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="selectpicker w-100" 
  id="drop2" data-actions-Box="true">
  <option>Val11</option>
  <option>Val22</option>
  <option>Val33</option>
</select>

在这里，我将'data-actions-Box'设置为true，以启用下拉列表中的Select All and deselect All选项。 当我单击全选选项时，它可以正常工作。我想将按钮切换为全选，然后取消全选。

为实现上述目的，我在页面中添加了以下事件

$(".bs-select-all").on('click',function () {

  $(".bs-deselect-all").css({
    "display": "block"
  });
  $(".bs-select-all").css({
    "display": "none"
  });
});
$(".bs-deselect-all").on('click',function () {
  $(".bs-select-all").css({
    "display": "block"
  });
  $(".bs-deselect-all").css({
    "display": "none"
  });
});

这里bs-select-all是在bootstrap multiselect中使用的select / deselect all按钮的类名（我在bootstrap-select.js文件中找到了它）。但是问题是当我单击第一个下拉菜单，两个下拉菜单的按钮都会更改为全部删除。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptjquerytwitter-bootstrap