Bootstrap 选择器多个关闭按钮
Bootstrap Selector Multiple Close Button
我使用 bootstrap select 插件创建了多个 select-选项。我想添加关闭按钮,如 select-all 或 remove-all 按钮。
点击外面就关闭了。
$(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/
documentation建议添加{ header:"header text" }
这将添加一个关闭按钮;将空格作为 header 您将得到关闭按钮:
$(function() {
$('#multiple_selector').selectpicker({header:" "});
});
已更新 fiddle:https://jsfiddle.net/m0s46g9k/
您可以使用 class
trigger
您的 select 操作按钮,如下所示。
$(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>
您可以添加data-done-button="true"
<select id="multiple_selector" multiple data-actions-box="true" data-done-button="true">
我使用 bootstrap select 插件创建了多个 select-选项。我想添加关闭按钮,如 select-all 或 remove-all 按钮。
点击外面就关闭了。
$(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/
documentation建议添加{ header:"header text" }
这将添加一个关闭按钮;将空格作为 header 您将得到关闭按钮:
$(function() {
$('#multiple_selector').selectpicker({header:" "});
});
已更新 fiddle:https://jsfiddle.net/m0s46g9k/
您可以使用 class
trigger
您的 select 操作按钮,如下所示。
$(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>
您可以添加data-done-button="true"
<select id="multiple_selector" multiple data-actions-box="true" data-done-button="true">