一方のセレクトボックスの値によって、もう一方のセレクトボックスの値を変化させるJavaScript

JavaScript

ちょこっと、暇つぶしに作ってみた。
実は今まで自分で作ったことが無かったことは秘密だ。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<head>
<script type="text/javascript" src="/javascript/lib/jquery-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    document.getElementById("options").onchange = function(){
	  alert("セレクトボックスの内容が変更されました");
	  var param = document.getElementById("options");
	  var dataApple = ["ふじ","王林","蒼"];
	  var dataOrange = ["甘夏","いよかん","早生温州"];
	  var dataStrawberry = ["ももいちご","アイベリー"];

	  switch(param.value){
	  	case "apple":
	  		bindDataToSelectBox(dataApple);
	  		break;
	  	case "orange":
	  		bindDataToSelectBox(dataOrange);
	  		break;
	  	case "strawberry":
	  		bindDataToSelectBox(dataStrawberry);
	  		break;
	  }

  }

  var bindDataToSelectBox = function(data){
	var select = document.getElementById("binded");
	select.length = 0;
	var optionsNum = data.length;

	for(var i=0; i < optionsNum; ++i){
		select.options[i] = new Option(data[i], data[i]);
	}
  }
});
</script>
</head>
<body>
<input type="button" id="click" value="イベント発生順の確認"/><br/>
<br>
<h1>セレクトボックスの動的変化</h1>
<select id="options" name="options" class="combo">
<option value="apple">りんご</option>
<option value="orange">みかん</option>
<option value="strawberry">いちご</option>
</select>
<select id="binded" name="options" class="combo">
</select>

</body>
</html>

動作確認はここで行える（今回の話とは関係の無いサンプルも混じっているけど）。

片方のセレクトボックスの値を選択した際に、もう片方のセレクトボックスに表示させる値は、この例ではクライアント側で作成している。
それを、サーバ側から取得した値を用いるように変更する場合は、changeイベントのイベントハンドラでajaxで通信を行って、そのコールバック関数でbindDataToSelectBox(dataFromServer)を実行すれば良いだろう。