セレクトボックスを100倍使い易くする!!

社内のツールを空き時間で作成しているのですが、セレクトボックスで選択する項目の中身(option)が、ものすごい数になっており絞り込むにも絞り込めない状態でした。
少し調べて見たところ、とても素晴らしい物がありましのたで早速使って見ました。

 

http://ivaynberg.github.io/select2/

Select2 – Select2 is a jQuery based replacement for select boxes.

 

使い方はとても簡単で、ファイルをダウンロードして解凍し設置、設定を行うだけです。
※どのライブラリでも同じですね・・・。

 

では、早速ダウンロードしたファイルを配置して行きます。

今回は、ドキュメントルートの直下のディレクトリに設置する仮定で話を進めますが、利用する場合には各々の環境(場所)に応じてパスは書き換えてください。
構成図
 (ドキュメントルート)
   ├ ./js
   │ └ select2.min.js
   ├ ./css
   │ └ select2.css
   ├ ./img
   │ ├ select2.png
   │ ├ select2-spinner.gif
   │ └ select2x2.png
   └ index.html

 

index.htmlには下記の様になっています。
※この設定内容で動作させる場合には、select2.cssの画像の読み込み場所を変更する必要があります。

<html>
  <head>
    <meta charset="utf-8">
    <link href="/css/select2.css" rel="stylesheet"/>
    <script src="/js/select2.js"></script>
  </head>
  <body>
    <select id="test" name="test">
      <option value=""></option>
      <option value="">xxxx</option>
      <option value="">yyyy</option>
      <option value="">zzzz</option>
    </select>
    <script>
      $(function() {
        $('#text').select2();
      });
    </script>
  </body>
</html>

 

設置後、select2.min.jsとselect2.css、その他イメージファイルがちゃんと読み込めていれば、機能が有効になっているはずです。

 

複数の選択を利用したい場合には、selectタグを下記の様に書き換えて下さい。

    <select id="test" name="test" multiple="multiple">

 

※multipleの場合には、値が配列となりますので取扱いに注意が必要です。

 

その他にも、豊富なオプションが用意されていますので、もっと凝った使い方をしたい方は下記のオフィシャルページを参照してみてください。

Select2
http://ivaynberg.github.io/select2/#documentation

 

ライブラリを利用する事で開発の工数も削減でき、さらにUIやUX的にも優れた物を短時間で作成する事ができます。
今後も使って見て感触が良かった物について、記載をしていきたいと思います。

関連する記事

コメントを残しませんか?