Bootstrap++：bootstrap-select 使用

coding++發表於2020-07-28
boot

效果圖：

HTML：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>下拉框多選</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" >

    <script type='text/javascript' th:src='@{/ecej/core/jquery-3.2.0.min.js}'></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" ></script>

    <link rel='stylesheet' type="text/css" th:href='@{/core/bootstrap-select-1.13.14/bootstrap-select.min.css}'/>
    <script type='text/javascript' th:src='@{/core/bootstrap-select-1.13.14/bootstrap-select.js}'></script>

    <script type='text/javascript' th:src='@{/multipleSelect.js}'></script>

</head>
<body>

<fieldset>
    <legend>bootstrap</legend>
    <div class="form-controls" style="width: 300px;">
        <select class="selectpicker show-tick form-control" multiple="multiple" title="請選擇工廠" data-size="10"
                data-selected-text-format="count > 15"
                data-live-search="true" data-live-search-placeholder="搜尋"
                data-actions-box="true" data-select-all-text="全選" data-deselect-all-text="重置"
                id="xinghao_id" name="xinghao_id" value="{$info.xinghao_id}">
        </select>
    </div>
</fieldset>
<hr/>
<button id="btn">獲取</button>
</body>
</html>

自定義 JS：

$(function () {

    // 獲取
    $("#btn").click(function () {
        var _vals = $("#xinghao_id").val();
        console.log(_vals)
    });

    var _option = "";
    for (var i = 0; i < 100; i++) {
        _option += '<option value="' + i + '">' + '測試' + i + '</option>';
    }
    $("#xinghao_id").append(_option);

    // 動態追加元素需要 重新重新整理渲染
    $('.selectpicker').selectpicker('refresh');

});

需把對應bootstrap-select 相關檔案URL引入替換；可直接使用

常用屬性介紹：

1、class="selectpicker" 普通的下拉框功能

2、title="請選擇城市名稱" title的作用與palcehoder一樣。

3、select class="selectpicker" multiple selectpicker和multiple屬性的搭配使用可實現多選

4、data-live-search="true" 這個屬性的預設值是false,作用是開啟模糊篩查搜尋框。

5、data-max-options 這個屬性表示最多可選幾個，搭配multiple使用，用法：data-max-options=“2”，表示最多選兩個。

6、data-selected-text-forma縮略模式， 用法：data-selected-text-format="count > 3"，當選中值大於3個的時候只顯示選中項的個數，注意只對多選生效。

7、data-style 表示預設選中樣式，用法：data-style="btn-primary"，屬性值就是bootstrap的按鈕樣式。

8、data-size data-size="6",表示下拉框顯示的下拉選單數量 超出條數後出現滾動條。

9、data-dropup-auto="false"， 表示下拉框預設向下展開；"true"，表示下拉框預設向下展開；"auto"，（預設值）表示下拉框根據頁面尺寸自動向下或向上展開。

10、$('.selectpicker').selectpicker('selectAll'); 全選

       $('.selectpicker').selectpicker('deselectAll'); 反選：

       $('.selectpicker').selectpicker('mobile'); 適應手機模式：

11、給下拉框賦初始值   .selectpicker:eq(0)表示該頁面或者該表單的第幾個使用了第幾個selectpicker屬性的input標籤。

        $('.selectpicker:eq(0)').selectpicker('val',valArea);

        $('.selectpicker:eq(1)').selectpicker('val',valPost);

        $('.selectpicker:eq(2)').selectpicker('val',valBank);

        $('.selectpicker').selectpicker('refresh');

        $('.selectpicker').selectpicker('render');

12、與angular或者knockout合用問題：

　　即下拉框無法顯示出選項，但實際上，按下F12去檢視時，又明顯的有這些選項值，只是頁面無法展示。

　　a. 新增Js：(只有在編譯之後第一次進入頁面的時候生效，一旦重新整理之後就失效(因為angular非同步載入)
　　$(function () {

　　　　$('.selectpicker').selectpicker('refresh');
　　　　$('.selectpicker').selectpicker('render');
　　})

更多資料：

1）：核心選擇：可以通過資料屬性或JavaScript傳遞選項。對於資料屬性，附加選項名稱  data-，如  data-style="" 或  data-selected-text-format="count"。

2）：大事記變遷：Bootstrap-select公開了一些事件以供選擇功能使用。

hide.bs.select，hidden.bs.select，show.bs.select和showd.bs.select都具有一個  relatedTarget 屬性，其值是切換錨元素。

$('#mySelect').on('hidden.bs.select', function (e) {
  // do something...
});

 

傳送門官網地址：https://developer.snapappointments.com/bootstrap-select/examples/

 

相關文章