Bootstrap Select Picker 使用指南

一、Bootstrap Select Picker簡介

Bootstrap Select Picker是一款基於jQuery和Bootstrap框架的下拉選擇框插件，它提供了多種選項，如搜索、過濾、多項選擇、分組和異步加載等特性。

Bootstrap Select Picker 的使用非常靈活，可以作為單選、多選、搜索框和分組選擇器等。它可以幫助開發者創建現代化，直觀的選擇框，並為用戶提供更好的用戶體驗。

二、常用的Bootstrap Select Picker屬性

Bootstrap Select Picker插件提供了多個屬性，可以根據不同的需求選擇合適的屬性進行配置。

1. data-live-search=”true”

啟用搜索功能，當用戶在輸入框里輸入關鍵字時，下拉框會自動篩選匹配的選項，從而方便用戶快速選擇。

    <select class="selectpicker" data-live-search="true">
        <option>自動</option>
        <option>手動</option>
        <option>混合</option>
    </select>

2. data-selected-text-format=”count > 3″

設置多選框的文字顯示方式，可以控制文本字符的數量、選擇的個數或者自定義文本。在該配置示例中，選中選項的個數超過3個時，文本顯示為“N 個已選擇” 。

    <select class="selectpicker" multiple data-selected-text-format="count > 3">
        <option>選項1</option>
        <option>選項2</option>
        <option>選項3</option>
        <option>選項4</option>
        <option>選項5</option>
        <option>選項6</option>
        <option>選項7</option>
    </select>

3. data-actions-box=”true”

啟用選項操作功能，包括全選、取消選擇、反選等操作，方便用戶批量操作選項。

    <select class="selectpicker" multiple data-actions-box="true">
        <option>選項1</option>
        <option>選項2</option>
        <option>選項3</option>
    </select>

4. data-size=”sm”

設置下拉框的大小，可以使用sm、md、lg控制大小，靈活適配不同的場景。

    <select class="selectpicker" data-size="sm">
        <option>選項1</option>
        <option>選項2</option>
        <option>選項3</option>
    </select>

三、Bootstrap Select Picker基本使用方法

1. 引入相關CSS和JS文件

引入Bootstrap CSS和JS文件以及Bootstrap Select Picker 的CSS和JS文件。

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.4.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-select/1.13.14/css/bootstrap-select.min.css" />

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.14/js/bootstrap-select.min.js"></script>

2. 創建下拉框

通過添加select元素和option元素，創建下拉框，類名為selectpicker表示啟動Bootstrap Select Picker插件。

    <select class="selectpicker">
        <option>選項1</option>
        <option>選項2</option>
        <option>選項3</option>
    </select>

3. 使用Bootstrap Select Picker插件

在jQuery的ready事件中，調用selectpicker()方法，將下拉框轉換為Bootstrap Select Picker下拉框。

    <script>
        $(document).ready(function() {
            $('.selectpicker').selectpicker();
        });
    </script>

四、Bootstrap Select Picker的高級使用

1. 多級下拉框

可以通過添加optgroup元素，將選項分組，形成多級下拉框。

    <select class="selectpicker">
        <optgroup label="一級選項1">
            <option>二級選項1.1</option>
            <option>二級選項1.2</option>
            <option>二級選項1.3</option>
        </optgroup>
        <optgroup label="一級選項2">
            <option>二級選項2.1</option>
            <option>二級選項2.2</option>
            <option>二級選項2.3</option>
        </optgroup>
    </select>

2. 異步加載數據

可以通過AJAX方式異步加載數據，動態生成下拉框選項。需要使用data-ajax-url、data-ajax-cache和data-ajax-delay等屬性設置URL、緩存和延遲時間等參數。

    <select class="selectpicker" data-live-search="true" data-ajax-url="data.php" data-ajax-cache="true" data-ajax-delay="250">
    </select>

3. 自定義模板

可以通過設置data-template屬性，按照自定義模板的方式呈現選項。也可以通過模板內的佔位符，插入選項值和元素。

    <select class="selectpicker" data-live-search="true" data-template=" %s">
        <option data-content=" Folder 1">Folder 1</option>
        <option data-content=" Folder 2">Folder 2</option>
        <option data-content=" Picture 1">Picture 1</option>
        <option data-content=" Picture 2">Picture 2</option>
    </select>

總結

Bootstrap Select Picker插件是一款功能強大、使用靈活的下拉選擇框插件。對於開發現代化、直觀化的Web界面具有重要意義。使用Bootstrap Select Picker插件，可以輕鬆地創建出搜索、過濾、多項選擇、分組和異步加載等特性的現代下拉選擇框，提高用戶體驗，優化用戶界面，使得Web開發更加便捷和高效。