２つのプルダウンを連動させる
２つプルダウンがあったとき片方で選択した内容に応じもう一方のプルダウンの内容が
変更されるように以下のようなコードを書いてみました。
しかし、これだと1番目のプルダウンでAを選択した後、Bを選択しなおすと
2番目のプルダウンの選択肢には前回Aを選んだ時に表示されていた内容が
残ってしまいます。そこで
連動するプルダウンの内容を作成する処理（Forループの処理）の直前で
for (i=0; i<itemNum; i++) {
document.myForm.tableName.options[i] = new Option(null, null);
}
という初期化処理を書いてみたのですが結果は同じでした。
解決するための何か良い方法はございますでしょうか。
<html>
<head>
<title>プルダウン連動サンプル</title>
<script type="text/javascript">
table_name = [["10", "9", "8", "7", "6"], ["りんご", "メロン", "バナナ"], ["嵐"]];
function setMenuItem(n) {
itemNum = table_name[n].length; // 項目数
//連動するプルダウンの内容を作成
for (i=0; i<itemNum; i++) {
alert(table_name[n][i]);
document.myForm.tableName.options[i] = new Option(table_name[n][i], table_name[n][i]);
}
//プルダウンの先頭を選択
document.myForm.tableName.options[0].selected = true;
}
</script>
</head>
<body onLoad="setMenuItem(0)">
<form name="myForm">
<select name="database" onChange="setMenuItem(this.selectedIndex)">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<select name="tableName">
</select>
</form>
</body>
</html>
補足
回答ありがとうございます。 ただ、 MULTIPLEをつけると必ずリスト形式になるということですよね？（プルダウンのまま選択はできないということですよね？）