@blog.justoneplanet.info

■どういうことかというと

1つ目のselectの選び方によって2つ目のselectの表示を変更する。

■サンプル

ひらがな アルファベット 数字

■注意点

JavaScriptを使えない環境（携帯など）や、JavaScriptをOFFにしている人は当然この選択肢が選べないので、アプリケーションや登録フォームなど、基幹となる部分で使用する場合、上記の人への対策を施すべきである。

■サンプルソース（HTML）

<form action="#">
<select name="type" id="type">
<option value="hiragana">ひらがな</option>
<option value="alpha">アルファベット</option>
<option value="number">数字</option>
</select>
<select name="figures" id="figures">
<option value=""></option>
</select>
</form>

■サンプルソース（JavaScript）

window.onload = function(){
	var optionValuesAry = new Array(
		new Array('あ','い','う'),
		new Array('a','b','c'),
		new Array('1','2','3')
	);
	var changeOption = function(){
		var selectedNum;
		for(var i=0; i<document.getElementById('type').options.length; i++){
			if(document.getElementById('type').options[i].selected){
				selectedNum = i;
			}
		}
		for(var i=0; i<document.getElementById('figures').options.length; i++){
			document.getElementById('figures').options[i] = null;
		}
		for(var i=0; i<optionValuesAry[selectedNum].length; i++){
			document.getElementById('figures').options[i] = new Option(optionValuesAry[selectedNum][i]);
		}
		document.getElementById('figures').options[0].selected = true;
	}
	document.getElementById('type').onchange = function(){
		changeOption();
	}
	changeOption();
}

■解説

2番目の選択肢の定義

1番目の選択肢の順番に応じた2番目の選択肢を定義する。

var optionValuesAry = new Array(
    new Array('あ','い','う'),
    new Array('a','b','c'),
    new Array('1','2','3')
);

選択項目の判定

以下のコードを1番目のセレクトの特定イベントに関連付ける事で判定する。

var selectedNum;
for(var i = 0; i < document.getElementById('type').options.length; i++){
    if(document.getElementById('type').options[i].selected){
        selectedNum = i;
    }
}

2番目のセレクトの操作

一旦、全てのoptionを何も入ってない状態にする。1番目の選択を変えた後の2番目の選択肢が、変える前よりも少なかった場合に、差分の選択肢が残ってしまうといった不具合を防ぐ目的が以下のコードにはある。

for(var i=0; i < document.getElementById('figures').options.length; i++){
    document.getElementById('figures').options[i] = null;
}

2番目のセレクトにそれぞれの値をセット

上述によって判定した、「1番目の選択されているもの」に対応した「2番目の選択肢」を1つ1つセットする。

for(var i=0; i < optionValuesAry[selectedNum].length; i++){
    document.getElementById('figures').options[i] = new Option(optionValuesAry[selectedNum][i]);
}

2番目のセレクトをセット

以下のコードで、2番目の選択肢の最初の選択肢を選択させる

document.getElementById('figures').options[0].selected = true;

読み込み直後の表示

人為的に選択されるまで、2番目に何も入ってない状態が起こってしまうため、ロード時に以下の関数が実行されるようにする。

changeOption();