- ベストアンサー
複数セレクトメニュー連動の追加の仕方について、教えてください
こんにちは、javascriptを使ったセレクトメニュー連動について教えてください <BODY> <script language="JavaScript"> <!-- menuItem = [["--------"], ["北海道"], ["青森県","岩手県","宮城県","秋田県","山形県","福島県"], ["茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県"], ["新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県"], ["三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県"], ["鳥取県","島根県","岡山県","広島県","山口県"], ["徳島県","香川県","愛媛県","高知県"]] menuval = [["dammy"], ["1-1"], ["2-1"], ["3-1","3-2","3-3","3-4","3-5","3-6","3-7"], ["4-1","4-2","4-3","4-4","4-5","4-6","4-7","4-8","4-9"], ["5-1","5-2","5-3","5-4","5-5","5-6","5-7"], ["6-1","6-2","6-3","6-4","6-5"], ["7-1","7-2","7-3","7-4"]] function setMenu(n){ itemNum = menuItem[n].length; document.myForm.Computer.length = itemNum; for (i=0; i<itemNum; i++) { document.myForm.Computer.options[i] = new Option(menuItem[n][i],menuval[n][i]); } document.myForm.Computer.style.visibility = "visible"; } // --> </script> <form name="myForm" method="POST" action="test.php" enctype="multipart/form-data" accept-charset="UTF-8"> <select name="Maker" onChange="setMenu(this.selectedIndex)"> <option value="dammy">--------</option> <option value="omosiro">北海道地方</option> <option value="syougeki">東北地方</option> <option value="cinema">関東地方</option> <option value="game">中部地方</option> <option value="music">近畿地方</option> <option value="sports">中国地方</option> <option value="car">四国地方</option> </select> <select name="Computer" style="visibility:hidden"> <option value="dammy">--------</option> </select> <br> <input type="reset" value="全ての入力をやり直す" onclick="location.reload()"> <INPUT type="submit" value="phpファイルにフォームからの入力データを渡す"> </form> </BODY> 現在2つのセレクトメニュー連動まではできたのですが、さらにもう１段階追加しようとしてつまずいています。 まず１段階目のセレクトメニューで「東北地方」を選択したら、「青森県」「岩手県」などが右に新たなセレクトメニューとして出てきます。 その中からたとえば、「岩手県」を選択したら次に（つまり右側に）新たに「盛岡市」「宮古市」「平泉町」などが新たにセレクトメニューとして表示されるようにしたいのですがどうもうまくいきません ３段階目のセレクトメニューもうまく表示させる方法はないでしょうか。よろしくお願いします。
- t_getsuei
- お礼率77% (7/9)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
反応がないようなので <html> 1<select id="a" onChange="SSO('b',st[this.value])"></select> 2<select id="b" onChange="SSO('c',st[this.value])"></select> 3<select id="c"></select> <script> var st=[]; st['日本']='北海道地方 東北地方 関東地方 中部地方'; st['北海道地方']='北海道'; st['東北地方']='青森県 岩手県 宮城県 秋田県 山形県 福島県'; st['関東地方']='茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県'; st['中部地方']='新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県'; st['岩手県']='盛岡市 宮古市 平泉町 洋野町'; window.onload=function(){SSO('a',st['日本']);} function SSO(id_name , text){ var text_array =('--- '+text).split(' '); var o = document.getElementById( id_name ); while( o.hasChildNodes() ) o.removeChild( o.lastChild ); for(var i=0, n, mx = text_array.length; i<mx; i++){ var n = new Option( text_array[i], text_array[i]); try{ o.add( n, null) } catch( ex ){ o.add( n ); } } } </script> でも全国制覇は大変よ～！？ 完成したら地域データくださいね^^;
補足
返事遅くなってすいません いや、ちょっと岩手ではないです（＾－＾） 改良したスクリプトありがとうございます 一番最初に出したスクリプトなのですけれども、もともと別のサイトにサンプルとして配布されていたものを自分でなんとか改造したものです。 実際にブラウザで表示させてみるとわかりますけれども、 最初のセレクトメニューで選択する ↓ style="visibility:hidden"で隠していた次のセレクトメニューが右側に現れる という形になっています。 これをさらに１段階進めて同じようにして３番目のセレクトメニューが現れるようにしたいのですが、１段階目と異なり元の<option>～</option>の所が固定ではないためにつまっている状態です。 自分がなんとか理解できているのはhtmlとphpぐらいなのでよく分からなくなっています。
お礼
こんにちは、返事遅れてすいません。 上のソースコードを元に改造してやっと自分の欲しい機能が実装できました。 やっぱりまだまだ勉強が必要のようです。 今回は本当にありがとうございました。