jQueryプラグイン[select2] セレクトボックスの拡張(検索)

要望

セレクトボックス上でデータを検索(絞込み)できるように

概要

jQuery プラグイン「Select2」を使用する。

プログラム

ソース

 <link rel="stylesheet" href="select2.css" type="text/css" />
 <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
 <script type="text/javascript" src="select2.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   $('.js-example-basic-single').select2();
  });
 </script>


 <select class="js-example-basic-single">
  <OPTION value="0">好きな食べ物なんですか?</OPTION>
  <OPTION value="1">りんご</OPTION>
  <OPTION value="2">バナナ</OPTION>
  <OPTION value="3">キウイ</OPTION>
 </select>

詰まった点

  • セレクトボックスが未選択の場合<option></option>の最上部データが表示される。ただ、value値を空欄にすると最上部データが表示されず空白のままになるので、value値は「0」や「スペース」を入れる。 
  • 本家サイトからダウンロードしたselect2.jsを使うと、プルダウンのスタイルがずれてしまった・・。以下、サンプルで使用されている「select2.js」を使用したら上手くいった。

Select2 | ホームページの作り方

他にも出来ること

セレクトボックス上で、複数データを選択したり、データをカテゴリごとに分けたり。

サンプル

※本家のサンプル
Examples - Select2

次回挑戦したいこと

jsonデータから、selectデータ呼び出し