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
次回挑戦したいこと
・jsonデータから、selectデータ呼び出し