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

関連記事

  1. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  2. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  3. pixelate.js
  4. jQuery Seat Charts
  5. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  6. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP