Skip to content →

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

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

select2はどんなもの?

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

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

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”]

SHARE

PROFILE

入江 慎吾
教える、学べるオンラインメンターサービスMENTAの代表 / 2-30個のサービスをつくり、M&Aで億単位の売却 / 受託開発20年→受託をやめサービス開発に専念→個人開発でつくったMENTAがヒット→ランサーズグループにジョイン / YouTubeで「サービスづくりで生きていく」配信中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)

SUBSCRIBE

メールマガジンに登録いただけると、ブログの新着記事をお知らせいたします。(励みにもなります!)また、YouTubeチャンネルでも個人開発・サービスについての情報を発信中です。

SPONSOR

Published in 開発奮闘記