自動車保険はネットで安くなる!? 通販型自動車保険に変えるだけで年間20,000円も違う!! 今すぐ5分でサクッと無料で見積もってみる

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

    

タグ: 

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

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

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

要件定義

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

HTMLコーディング

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

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

jQueryとjavascriptとCSS

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

どうですか?素人がjQueryなんぞいじくるとこんなに長いソースになってしまいます。わかる人はループとか使っちゃったりして、もっとシンプルなソースになるんだろうなぁと悲しくなりました。でも動くからいいや的な考えです。のちに、あまりに長いので外部に読み込むことにしました。

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

ベース参考:http://bowz.info/3913
クリア参考:http://cheesememo.blog39.fc2.com/blog-entry-434.html

この記事にいいね!

こんな記事も読まれています

この記事へのコメント

メールアドレスが公開されることはありません。

no image
gotop