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. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

  2. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  3. no-image

    JavaScript

    オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」

    simplertはオーバーレイによるシンプルで美しいアラートを実装する…

  4. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  5. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  6. Protip

    JavaScript

    カスタマイズ性抜群のツールチップを実装できる「Protip」

    Protipはカスタマイズ性が抜群のツールチップを実装することができる…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP