引导选择器多个关闭按钮答案

【问题标题】：Bootstrap Selector Multiple Close Button引导选择器多个关闭按钮
【发布时间】：2019-02-06 18:22:43
【问题描述】：

我使用引导选择插件创建了一个多选选项。我想添加关闭按钮，例如全选或全部删除按钮。

当你点击外面时它就会关闭。

$(function() {
  $('#multiple_selector').selectpicker();
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.js"></script>
<select id="multiple_selector" multiple data-actions-box="true">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
  <option value="50">50</option>
  <option value="60">60</option>
</select>

这是我的 jsfiddle：https://jsfiddle.net/ozgunlu/dL6brmyp/2/

【问题讨论】：

标签： jquery bootstrap-select

【解决方案1】：

你可以加data-done-button="true"

<select id="multiple_selector" multiple data-actions-box="true" data-done-button="true">

【讨论】：

在底部很好地添加了一个“关闭”按钮：为您更新小提琴：jsfiddle.net/6v3tuk8x

【解决方案2】：

documentation 建议添加{ header:"header text" }，这将添加一个关闭按钮；以空格作为标题，您将获得关闭按钮：

$(function() {
    $('#multiple_selector').selectpicker({header:" "});
});

更新小提琴：https://jsfiddle.net/m0s46g9k/

【讨论】：

【解决方案3】：

您可以使用classtrigger 选择操作按钮，如下所示。

$(function() {
  $('#multiple_selector').selectpicker();
  $('.actions-btn').on("click", function() {
    $('#multiple_selector').trigger('click');
  });

});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.js"></script>
<select id="multiple_selector" multiple data-actions-box="true">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
  <option value="50">50</option>
  <option value="60">60</option>
</select>

【讨论】：