selectboxに検索機能を追加できる「Select2」

リストからアイテムを選択させることはよくあります。そんな時、例えば100件ともなると、そこから探して選ぶのは大変ですよね。そこで便利なのが「Select2」。こいつを入れると一気にリッチになります。

select2はどんなもの？

まずはDemoをみてもらうのが早いです。

こんな感じで検索でselectboxの中から、選択ができるようになります。これは使いどころが多い。

選択したアイテムをタグ風に追加するパターンもあり。オプションも豊富でカスタマイズしやすいかも。

select2の使い方

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

CSSとJSを読み込んで、起動させるだけ。

<script type="text/javascript">
  $('select').select2();
</script>

かんたんです。これだけで基本使えるようになります。

Select2

[sc name=”engeneer”]