- ベストアンサー
２つのコンボボックスの連携
以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。 どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript"> <!-- txt = {}; txt["1"] = new Array("あ","い","う","え","お"); txt["2"] = new Array("か","き","く","け","こ"); txt["3"] = new Array("さ","し","す","せ","そ"); txt["4"] = new Array("た","ち","つ","て","と"); txt["5"] = new Array("な"); function initMenu(){ var i; for (i=0; i<txt["1"].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt["1"][i],txt["1"][i]); } } function setSubMenu(area){ var i; for (i=0; i<document.FORM1.MENUB.length; i++){ document.FORM1.MENUB.options[i] = null; } for (i=0; i<txt[area].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt[area][i],txt[area][i]); } } // --> </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>
- akomot
- お礼率96% (200/207)
- JavaScript
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは、length属性の値とOptions配列のサイズに不整合が起きているのかなと思います。なんでそうなのかは不明ですが、、、 setSubMenu関数の内容を以下のように変えてみました。 // 変数名が長いので、別変数で参照します。 var targetOptions = document.FORM1.MENUB.options; // 現在のサイズより今の選択項目配列サイズが多ければ縮小。 if (txt[area].length < targetOptions.length) { targetOptions.length = txt[area].length; } // 選択項目配列に値をつけなおします。 var i = 0; for (i=0; i<txt[area].length; i++){ targetOptions[i] = new Option(txt[area][i], txt[area][i]); }
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
for (i=0; i<document.FORM1.MENUB.length; i++){ を for (i=document.FORM1.MENUB.length-1; i>=0; i--){ に変更して下さい。
お礼
ありがとうございます。 教えていただいたとおりやってみたのですがやっぱりうまくいきません。もう少し研究してみます。
お礼
ありがとうございます。早速使わせていただいてよろしいでしょうか？ 配列の大きさを小さくするというのは思いつきませんでした。本当にありがとうございました。