セレクトメニュー選択でもう一つセレクトメニューを出す

質問

「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。
しかし、「ブロック名」を「Ａブロック」選択しても「部署名」が「Ｂトップ～」が出てしまいます。

何がおかしいのか分からないので、ぜひ教えてください。
よろしくお願いいたします。

menuItem = [　　["Ａトップ","A本部","B本部","C本部"],
["Ｂトップ","1本部","2本部","3本部"],
["Ｃトップ","あ本部","い本部","う本部"],
　　　　　　　　["Ｄトップ","●本部","▲本部","◆本部"] ];

function setMenuItem(n)
{
len = document.form2.BUSYO.options.length;
for (i=0; i<len; i++)
{
document.form2.BUSYO.options[i] = null;
}
document.form2.BUSYO.style.visibility = "visible";
for (i=0; i<menuItem[n].length; i++)
{
document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]);
}
----------------------------------------------------------------
<SELECT size="1" name="Block" onChange="setMenuItem(this.selectedIndex)">
<OPTION selected value="0">選択してください</OPTION>
<OPTION value="a-block">Aブロック</OPTION>
<OPTION value="b-block">Bブロック</OPTION>
<OPTION value="c-block">Cブロック</OPTION>
<OPTION value="d-block">Dブロック</OPTION>
</SELECT>
<SELECT size="1" name="BUSYO" style="visibility:hidden">
<OPTION selected value="0">選択してください</OPTION>
</SELECT>

回答No.1

SAYKA · ベストアンサー

よくある罠に陥ってるみたいだよ

これは　selectedindex　は正しい値を返してるけれど「選択して下さい」がアイテムのひとつであって「Ａブロック」は1を返す。
だけど部署の配列はAが0でなければならない。。。というのを認識できてない事に起因している。

しかしそのままー1で演算すると他の選択から「選択してください」へ戻すと・・・なので簡単につじつまを合わせるにはmenuitemに0用のデータを追加する事かな。

お礼

出来ました!!!!!　本当にありがとうございました。感激です!!まだまだ勉強不足なので、頑張ってわかるようになります!!!