jQueryを使ったフォームのselectタグ改良で親項目を選択で子項目が出現したり内容を変たり

jQueryを使ったフォームのselectタグ改良:親項目を選択で子項目が出現したり内容を変たり Web関連

CGIフォームで、<select>タグの親の項目を選択すると次の<select>タグが子の項目として出現するようにします。さらに出現した子の項目の<select>タグの内容を、最初に選択した親の項目の<select>タグによって変えたりもします。

今回は求人サイトの業種選択で絞っていく感じのやーつに改良します。

要件定義

  1. 大分類、中分類、小分類と順番に選択させ、職種を細かく絞る
  2. 受け渡す値は大分類、中分類、小分類の3種類。
  3. 大分類選択中は次の次の層である小分類を非表示にする。
  4. 中分類、小分類の値は、大分類の再選択でクリアさせる。

HTMLコーディング

まずHTMLの<form>の<select>部分を作ります。意味不明な職種は華麗にスルーをして下さい。

ものすごい量ですよね。ユーザーからは至ってシンプルに見えるのに、実際はこんなに書かなきゃいけないんです。<select>に項目数分のsizeを指定してそれっぽくします。sizeを削除すればプルダウンになります。

jQueryとjavascriptとCSS

次はヘッダー内にjQueryとjavascriptとCSSをちょっと書きます。

どうですか?素人がjQueryなんぞいじくるとこんなに長いソースになってしまいます。わかる人はループとか使っちゃったりして、もっとシンプルなソースになるんだろうなぁと悲しくなりました。

でも動くからいいや的な考えです。のちに、あまりに長いので外部に読み込むことにしました。

デモを見る

※スマホ・タブレットだとプルダウン形式に強制のようです。

スポンサーリンク
スポンサーリンク
Web関連
こんな記事も読まれています
10-PLATE

コメント