地域を選択すると、応じた都道府県名が選べるようにする

[ソーズコード]

エリア
<form name="searchbox">
	<select name="area">
		<option value="0">選ぶ</option>
		<option value="1">北海道・東北</option>
		<option value="2">関東</option>
		<option value="3">北信越</option>
		<option value="4" selected="selected">東海・中部</option>
		<option value="5">関西</option>
		<option value="6">中国・四国</option>
		<option value="7">九州・沖縄</option>
	</select>

都道府県 // 予め一種類だけ書いて、selectedにしておく
	<select name="pref">
		<option value="">選ぶ</option>
		<option value="">静岡県</option>
		<option value="">愛知県</option>
		<option value="">岐阜県</option>
		<option value="">三重県</option>
	</select>
</form>

<script type="text/JavaScript">
var ccc = document.searchbox.area; // area（エリア）のselect
var bbb = document.searchbox.pref; // pref（都道府県）のselect

ccc.onchange = function(){ // area（エリア）が変更されたら
	if(ccc.value == 7){ // valueでないと効かない。ccc.textやccc.option[7]ではだめ
		bbb.length = 10; // optionの数を宣言する。これがないとoptionが生成されない。

		bbb.options[0].text = "九州・沖縄の都道府県";// optionの1つめ
		bbb.options[0].value = 0;
		
		bbb.options[1].text = "沖縄県";  // optionの2つめ
		bbb.options[1].value = 1;

		bbb.options[2].text = "鹿児島県";// optionの3つめ
		bbb.options[2].value = 2;

		bbb.options[3].text = "熊本県"; // optionの…
		bbb.options[3].value = 3;

		bbb.options[4].text = "宮崎県";
		bbb.options[4].value = 4;

		bbb.options[5].text = "福岡県";
		bbb.options[5].value = 5;

		bbb.options[6].text = "長崎県";
		bbb.options[6].value = 6;

		bbb.options[7].text = "佐賀県";
		bbb.options[7].value = 7;

		bbb.options[8].text = "熊本県";
		bbb.options[8].value = 8;

		bbb.options[9].text = "大分県";
		bbb.options[9].value = 9;
	}else{
		bbb.length = 1; // optionの数を宣言する。これがないとoptionが生成されない。
		bbb.options[0].text = "選んでね";
		bbb.options[0].value = 0;
	}
} // End function
※元々HTML上にない都道府県（option）を動的に作成するので、bbb.length = 10; とoptionの数を宣言してやる必要がある。
</script>

インデックスに戻る