ブートストラップ検索可能なドロップダウンボックスのselectpickerの使用法

場合によっては、ドロップダウンボックスに多くのオプションがあり、ユーザーは選択に長い時間を費やすことになります。ブートストラップのselectpickerの助けを借りて、良い選択です。

関連するリソースを紹介する必要があります。cdnアドレスはhttps://www.bootcdn.cn/bootstrap-select/です。

CSSの導入の順序は1にすることをお勧めします。bootstrap-select.css2. bootstrap.css

<link rel="stylesheet" href="../static/css/bootstrap-select.css">
<link rel="stylesheet" href="../static/css/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="../static/css/bootstrap-datetimepicker.min.css">

jsの導入順序は1にすることをお勧めします。jquery.js 2. bootstrap.js 3.bootstrap-select.js

<script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/bootstrap-select.js"></script>

例：検索ボックスに入力された文字は、中国語と英語の半角状態では異なる値になることに注意してください。

<div class="col-md-4" style="padding:0;">
    <select id="selectSf" class="selectpicker" multiple data-hide-disabled="true" data-size="5" data-live-search="true">
       <option value="00000000" selected="">alphabet</option>
       <option value="10000000">aa</option>
       <option value="20000000">bbb</option>
       <option value="20000000">cccc</option>
       <option value="30000000">ddddd</option>
       <option value="40000000">eeeeee</option>
    </select>
</div>

分析：

1. class = "selectpicker";通常のドロップダウンボックス

2.タイトル= "データアイテムを選択してください";効果はプレースホルダーと同じです

3. class = "selectpicker" multiple;複数の選択を実現するために一緒に使用されます

4. data-live-search = "true";ファジー検索を開く、デフォルト値はfalse、手動で開くように設定する必要がある

5. data-max-options = "2";複数の選択肢の数を設定します。現時点では最大2つのオプションを選択できます

6.data-style = "btn-primary";スタイルはデフォルトで選択され、ボタンストラップのボタンスタイル

7. data-size = "10";ドロップダウンボックスに表示されるオプションの数を設定します

8. data-dropup-auto = "false"。これは、ドロップダウンボックスがデフォルトで下に拡張することを意味します

9. $（ '。selectpicker'）。selectpicker（ 'selectAll'）;すべて選択：
$（ '。selectpicker'）。selectpicker（ 'deselectAll'）;逆選択：
$（ '。selectpicker'）。selectpicker（ 'mobile' ）;携帯電話モードに適応：

問題：データを動的に追加した後、ドロップダウンボックスが表示されず、エラーも報告されません。これらのオプション値は、ブラウザーがソースコードを表示するときに存在します。または、コンパイル後に初めてページにアクセスしたときに有効になり、更新または別のインターフェースに切り替えた後に無効になります。

扱う：

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

値：

選択した値は、jqueryを介して取得できます。let source = $（ "＃select"）。val（）。join（）;

選択した結果は配列なので、使用するときには必ず文字列に変換してください。

動的割り当て：

$（ "＃select"）。append（ "<option value = '1111'> text </ option>"）;

ブートストラップ検索可能なドロップダウンボックスのselectpickerの使用法

おすすめ