如何解决处理Bootstrap Multi select下拉列表的All All和Deselect All选项
我在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 举报,一经查实,本站将立刻删除。