时间戳

首页 > 解决方案 > 处理 Bootstrap 多选下拉列表的全选和取消全选选项

javascript - 处理 Bootstrap 多选下拉列表的全选和取消全选选项

问题描述

我在我的 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，以便在我的下拉列表中启用全选和取消全选选项。当我单击全选选项时，它工作正常。我想将按钮切换为全选并取消全选。

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

$(".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-select.js 文件中找到它）。但问题是当我单击第一个下拉菜单的全选按钮时，两个下拉菜单的按钮都将更改为全部取消选择。

标签： javascripthtmljquerytwitter-bootstrap

解决方案

推荐阅读