Dependent / Cascading Select List with jQuery Select2

JavaScript

選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading Select List with jQuery Select2」

セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のjQueryプラグイン「select2」ですが、これに選択内容によってその下の階層にあたるセレクトボックスの内容を変化させることができる機能をプラスした「Dependent / Cascading Select List with jQuery Select2」をご紹介します。

選択する項目を絞り込む

デモ

デモでは上下に並んだ2つのセレクトボックスが設置されています。上にある「I’d like to ride」から選ぶ項目に応じて、その下にある「More specifically」から選択できる項目が変わります。

例えば、上のボックスから「Animal」を選択すると、その下にあるボックスからは「Horse」「Elephant」「Donky」「Dolphin」の中から選択できるようになります。

一方、今度は上のボックスから「Vehicle」を選択すると、その下にあるボックスからは「Car」「Bike」「Jeep」「Bus」「Boat」「Ship」が選択できるようになります。

最初に選んだ項目に応じて、次に選択する項目をあらかじめ絞り込むことができるので、ユーザーにとっては選びやすいですし、とても効率的ですね。

ちなみに、仕組みとしてはajaxがベースになっており、セレクトボックスからの選択に基づいて内容がリフレッシュされます。また、デモではツイッターのBootstrapが使われているとのことです。

というわけで、選択内容によってその下の階層にあるセレクトボックスの内容を変化させるセレクトボックスを実装したい人は、「Dependent / Cascading Select List with jQuery Select2」を活用してみてはいかがでしょうか。

Dependent / Cascading Select List with jQuery Select2

Typewriter JSタイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」前のページ

レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」次のページimagelightbox

最近の記事

  1. スマトラ
  2. さくらドーナツ
  3. 紙のコーヒーフィルター
  4. PS5とFF7リメイクと鉄拳8
PAGE TOP