凸 ブロックのつみかさね

デザイン、技術メモ、レビュー中心の雑記ブログ

プルダウンで段階的に項目を選択するjQueryコードサンプル

知り合いに質問されて、試しに作ってみたコードをメモしておきます。

要件

  • 競技、会場、時間と段階的に選択していきたい
  • 選択する競技や会場によって時間が異なる
  • 上位階層を選択したら下位階層はリセットする

確認環境

  • Google Chrome 57.0.2987.133 (64-bit) Mac版
  • safari 9.1.3 (9537.86.7.8) Mac版
  • Firefox 52.0.2(64ビット) Mac版

どうやって作ろう?

1つ1つプルダウンリストを作って、表示/非表示してもいいのですが、数が多くてめんどくさそうなので、階層ごとのデータを作って読み込む形にしました。

typeというのは1つの塊を表すものです。textとvalueはそのままの意味で、htmlに使うものです。

jQueryでchange(selectを選択した)時に、選択したoptionが何番目のものかを調べ、その番号とデータを照らし合わせながら該当するoptionを生成する形です。

コード

デモ

jquery-pulldown-step-select - JSFiddle

今回のつみかさね

for文の箇所をjQueryにできないかなぁと思いました。

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

©blockworks.