htmlのセレクトボックスに検索機能を付ける

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

htmlのセレクトボックスに検索機能を付ける [2021/11/26 09:21] – 作成 133.11.144.12htmlのセレクトボックスに検索機能を付ける [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1
行 1: 行 1:
-====== HTMLのセレクトボックスに検索機能を付ける ====== 
  
-jQueryプラグイン「Select2」を使用する。 
- 
-===== 読み込み ===== 
- 
-    <!-- jquery --> 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
-    <!-- Select2.css --> 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css"> 
-    <!-- Select2本体 --> 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script> 
-    <!-- Select2日本語化 --> 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/ja.js"></script> 
- 
-===== selectボックスの作成 ===== 
- 
-続いて、セレクトボックスを追加。 
- 
-    <select class="test-select2"> 
-      <option>　</option> 
-      <option>リンゴ</option> 
-      <option>ゴリラ</option> 
-      <option>ラッパ</option> 
-    </select> 
- 
-===== select2の設定 ===== 
- 
-最後にSelect2用のスクリプトを記述。 
-日本語化を行うので、languageの設定も行う。 
- 
-    $(function() { 
-      $('.test-select2').select2({ 
-        language: "ja" //日本語化 
-      }); 
-    }) 
- 
-===== 複数選択したい時 ===== 
- 
-複数選択する場合は、セレクトボックスにmultipleを付けるだけ 
- 
-    <select class="test-select2" multiple="multiple"> 
-      <option>リンゴ</option> 
-      <option>ゴリラ</option> 
-      <option>ラッパ</option> 
-    </select> 
  • htmlのセレクトボックスに検索機能を付ける.1637918495.txt.gz
  • 最終更新: 2021/11/26 09:21
  • by 133.11.144.12