連動するセレクトボックスの内容を増やしたい

質問

お世話になります。
現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。
http://enjoyjob.blog116.fc2.com/blog-entry-221.html

サンプルでは親と子のセレクトボックスが３つなのですが、
７つの親と子のセレクトボックスを作りたいと思っています。

JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。

<script type="text/javascript">
var parentArray = new Array('東京都','神奈川県','静岡県');
////親セレクトボックスを配列から書き出し
function autoOptions(){
var parent=parentArray.length;
var selectNumber = document.getElementsByTagName("select").length;

for(var j=0;j<=selectNumber/2-1;j++){
idName='parent_'+j;
document.getElementById(idName).length=parent+1;
for(var i=0;i<parent;i++){
document.getElementById(idName).options[i+1].text=
parentArray[i];
}
}

}
////連動セレクトボックス
function selectBox(n){
var idParent='parent_'+n;
var idChild='child_'+n;

if(document.getElementById(idParent).selectedIndex==0){
document.getElementById(idChild).length=1;
document.getElementById(idChild).selectedIndex=0;
}
else {
document.getElementById(idChild).selectedIndex=0;
document.getElementById(idChild).length=1;
var child =
childArray[document.getElementById(idParent).selectedIndex-1];
document.getElementById(idChild).length=child.length+1;
for(var i=0;i < child.length;i++){
document.getElementById(idChild).options[i+1].text= child[i];
}
}
}
////子セレクトボックスの配列
var childArray = new Array();
childArray[0]=new Array("渋谷区","品川区","港区","新宿区");
childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市");
childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市");
</script>

回答No.3

fujillin · ベストアンサー

＞セレクトのペアはjavascript内で書いているようなので、
そんなことはありません。　HTMLソースのidで設定しています。
「parent_1」と「child_1」がペアといった具合です。
スクリプトで書いているのは、親セレクトのオプションの内容を定義された内容に書き直していること。

＞親と子のセレクトペアを増やしたら、下記のように「子育て」の子
＞セレクトが表示されなくなりました。
親の選択肢が「食べる」「遊ぶ」「買う」「暮らす」「子育て」と5種類定義されているのに対して、子のほうは4種類しかないからです。（実際は「暮らす」に対応するものがない？）
『親の五番目に対応する子の内容がない』ということでエラーになっているだけなので、childArray[4]を定義してあげれば動作するはずです。

ご質問の『セレクトボックスが3つ→7つ』の意味がやっとわかりました。
オプションの数を3つより増やしたいという意味のご質問だったのですね。

#1の回答は、そのまま『セレクトボックスの数を増やしたい』という質問に対する回答として書きましたので、意味が全然違うものになっています。
質問にHTMLの記載がないためセレクトボックスの数が不明なので、質問文の通り3ペア（6個）設置しているのだと推測しました。
（そのままでもOKという結果だけは同じですが…）

オプションを増やす場合は、親のオプションと、子のオプションの数を合せて置かないと不具合が生じるので、当然ながらエラーになります。

お礼

教えていただいたとおりchildArray[4]を定義したら
うまくいきました！

オプションとセレクトボックスを勘違いしていました。
お手数をおかけし、申し訳ありませんでした。
（暮らすの内容も抜けていました）

勉強し直します・・・。

回答No.2

yambejp

元ソースの構造があまりよいとは言えないので、なんとも言えませんが

＞「子育て」の子セレクトが表示されなくなりました。

については、親の要素数が5個あり、子育ては0から始めて4番目の要素ですね。
一方childArrayは3番目までしか設定されていないので、当然最後の
要素の子育ては連携要素がないと判断されています。

お礼

参考になりました。
ありがとうございました。

回答No.1

fujillin

まったく同じ動作で（現状で予定通り動作しているのであれば）、個数だけ増やしたいのならスクリプトはそのままでよいはず。（特に数に制限はない）
HTMLソースでセレクトのペアを増やせばいいだけ。

それよりもautoOptions()でいきなり、セレクトの数を拾っているので、同じページ中に関係の無いセレクトが混じっていたりすると、エレメントが無いみたいなエラーになるかも…

お礼

早速の回答ありがとうございます。
＞HTMLソースでセレクトのペアを増やせばいいだけ。
セレクトのペアはjavascript内で書いているようなので、うまくいかずに困っています。

親と子のセレクトペアを増やしたら、下記のように「子育て」の子セレクトが表示されなくなりました。
http://stage.chiikeys.jp/t_test/form.html

＞それよりもautoOptions()でいきなり
了解しました。調べてみます。