セレクトメニュー項目に応じてもう１つのセレクトメニュー項目内容を切り替える

説明

セレクトメニューで選択された項目に応じて、別のセレクトメニューの内容を変更するには、あらかじめ配列にセレクトメニューの項目を用意しておきます。選択された項目の選択番号に応じて配列内容を読み出し、new Option()でセレクトメニューの項目を追加します。ただし、選択項目の総数が変化するような場合には、必ず選択項目を削除してから追加するようにします。削除しない場合は、以前の項目が残ったままになります。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>セレクトメニュー項目に応じてもう１つのセレクトメニュー項目内容を切り替える</h1>
<form action="./enq.cgi" method="get" id="mainForm" name="mainForm">
<select id="selMain">
<option value="">OSを選択してください</option>
<option value="Win">Windows</option>
<option value="Mac">Mac OS</option>
</select>
<select id="selSub"></select>
</form>
</body>
</html>
window.onload = function(){
document.getElementById("selMain").onchange = function(){
var selNo = this.selectedIndex;
var selObj = document.getElementById("selSub");
var optionData = [[
],[
{ text:"95A°`Me", value:"95"},
{ text:"2000/XP", value:"2000"},
{ text:"Vista", value:"Vista"}
],[
{ text:"OS 9", value:"9"},
{ text:"OS X", value:"10"}
]
];
while(selObj.hasChildNodes()) {
selObj.removeChild(selObj.firstChild);
}
for (var i=0; i<optionData[selNo].length; i++){
selObj.options[i] = new Option(optionData[selNo][i].text, optionData[selNo][i].value);
}
}
}