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

[ソーズコード]

エリア
<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（エリア）が変更されたら

	switch(ccc.selectedIndex){ // if文と違いccc.valueではなくccc.selectedIndex。case + 数値で条件処理するから
	case 7 :
		bbb.length = 10; // optionの数を宣言する。これがないとoptionが生成されない。
		bbb.options[0].text = "九州・沖縄エリアの都道府県";
		bbb.options[0].value = 0;
		
		bbb.options[1].text = "沖縄県";
		bbb.options[1].value = 1;
		
		bbb.options[2].text = "鹿児島県";
		bbb.options[2].value = 2;

		bbb.options[3].text = "熊本県";
		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;
		break;
	
	case 1 :
		alert("case1 北海道・東北");
		break;
		
	case 2 :
		alert("case2 関東");
		break;
	
	case 3 :
		alert("case3 北信越");
		break;
	
	case 4 :
		alert("case4 東海・中部");
		break;
		
	case 5 :
		alert("case5 関西");
		break;
		
	case 6 :
		alert("case6 中国四国");
		break;
		
	default :
		bbb.length = 2; // optionの数を宣言する。これがないとoptionが生成されない。
		bbb.options[0].text = "九州・沖縄エリアを選んでね";
		bbb.options[0].value = 0;
		
		bbb.options[1].text = "九州・沖縄エリアを選んでねってば";
		bbb.options[1].value = 1;
		break;
	}
} // End function

※元々HTML上にない都道府県（option）を動的に作成するので、bbb.length = 10; とoptionの数を宣言してやる必要がある。
</script>

インデックスに戻る