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

10/23/2015

リストからアイテムを選択させることはよくあります。そんな時、例えば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”]

PROFILE

入江慎吾
Webサービスを作るのが大好きです。制作会社10年→フリーランス→受託をやめサービス開発に専念。プログラミングのメンターサービスMENTAは月間流通額約1,300万を突破🚀 YouTubeでは個人開発について語ってます / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営（詳しいプロフィール）

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

select2はどんなもの？

select2の使い方

SHARE

PROFILE