- ベストアンサー
ダブルでコンボボックスについて
1つ目のコンボボックスで都道府県を選択できるとします。２つ目のコンボボックスは1つ目で選択した県の市町村が選べるようにしたいんですが、JavaScriptではどのように記述すればよいのでしょうか？ めちゃくちゃ人頼みで申し訳ないのですが、急いでいるので教えて下さい（－人－）
- sunny65
- お礼率43% (41/95)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでどうですか？ データの設定方法は、一番目に都道府県名、N個の市町村名、最後は"END"の文字列としてます。 後はお好みで改造してください。 少しでも参考になれば幸いです。 <script langage="javaScript"> PREF_NUM=47; // 都道府県数 PREF=[ ["北海道","苫小牧市","札幌市","室蘭市","END"], ["青森県","青森市","弘前市","END"], ～ 略 ～ ["大阪府","大阪市","枚方市","堺市","END"], ["沖縄県","那覇市","END"] ]; function setItem(){ clearItem() ; no = document.myForm.PrefName.selectedIndex ; cnt = 1 ; while(1){ if ( PREF[ no ][ cnt ] == "END" ) break ; document.myForm.CityName.options[ cnt-1 ] = new Option( PREF[ no ][ cnt ], PREF[ no ][ cnt ] ) ; cnt++ ; } } function clearItem(){ itemNum = document.myForm.CityName.length for ( i=0; i<itemNum; i++ ){ document.myForm.CityName.options[ i ] = null ; } } function setPrefItem(){ for ( cnt=0; cnt<PREF_NUM; cnt++ ){ document.myForm.PrefName.options[ cnt ] = new Option( PREF[ cnt ][ 0 ], PREF[ cnt ][ 0 ] ) ; } document.myForm.PrefName.selectedIndex = 0 ; } function initialize(){ setPrefItem() ; setItem() ; } </script> <body onLoad="initialize()"> <form name="myForm"> <select name="PrefName" onChange="setItem()"> <option value=""> </select> <select name="CityName"> <option value=""> </select> </form>
その他の回答 (1)
- Blackwingls
- ベストアンサー率44% (138/313)
こんばんわぁ、Blackwinglsです。 手元にあったscriptが使えそうなので少し弄ってみました。 case文に変更するなりループ回すなりすると結構面白そうですね。 ではでは～☆彡 <HTML> <HEAD> <TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--- function BYGR() { flag = document.forms[0].elements[0].value if(flag=="BOY") { document.forms[0].elements[1].options[0].text = "男の子用のプレゼント"; document.forms[0].elements[1].options[1].text = "プラモデル"; document.forms[0].elements[1].options[2].text = "スニーカー"; document.forms[0].elements[1].options[3].text = "おもちゃの缶詰(男の子用)"; } if(flag=="GIR") { document.forms[0].elements[1].options[0].text = "女の子用のプレゼント"; document.forms[0].elements[1].options[1].text = "テディベアー"; document.forms[0].elements[1].options[2].text = "ドレス"; document.forms[0].elements[1].options[3].text = "おもちゃの缶詰(女の子用)"; } if(flag=="") { document.forms[0].elements[1].options[0].text = "男の子用・女の子用どちらか選んで下さい"; document.forms[0].elements[1].options[1].text = "-------------------------------------"; document.forms[0].elements[1].options[2].text = "-------------------------------------"; document.forms[0].elements[1].options[3].text = "-------------------------------------"; } } //---> </SCRIPT> </HEAD> <BODY> *後からフォームの内容を変える<P> <HR> 男の子用・女の子用の2通りのプレゼントを用意しました、どちらか選んでください。<BR> <FORM>性別 <SELECT onChange="BYGR()"> <OPTION VALUE=""> <OPTION VALUE="BOY">男 <OPTION VALUE="GIR">女 </SELECT> <P> <SELECT> <OPTION>男の子用・女の子用どちらか選んで下さい <OPTION>------------------------------------- <OPTION>------------------------------------- <OPTION>------------------------------------- </SELECT> </FORM> </BODY> </HTML>
お礼
早速のお返事ありがとうございます。 大変参考になりました。
お礼
大変参考になりました。 ありがとうございます。 お詳しいのですね。私もこれから勉強していきます。