![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
お世話になります。
現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。
http://enjoyjob.blog116.fc2.com/blog-entry-221.h …
サンプルでは親と子のセレクトボックスが3つなのですが、
7つの親と子のセレクトボックスを作りたいと思っています。
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ベストアンサー
- 回答日時:
>セレクトのペアはjavascript内で書いているようなので、
そんなことはありません。 HTMLソースのidで設定しています。
「parent_1」と「child_1」がペアといった具合です。
スクリプトで書いているのは、親セレクトのオプションの内容を定義された内容に書き直していること。
>親と子のセレクトペアを増やしたら、下記のように「子育て」の子
>セレクトが表示されなくなりました。
親の選択肢が「食べる」「遊ぶ」「買う」「暮らす」「子育て」と5種類定義されているのに対して、子のほうは4種類しかないからです。(実際は「暮らす」に対応するものがない?)
『親の五番目に対応する子の内容がない』ということでエラーになっているだけなので、childArray[4]を定義してあげれば動作するはずです。
ご質問の『セレクトボックスが3つ→7つ』の意味がやっとわかりました。
オプションの数を3つより増やしたいという意味のご質問だったのですね。
#1の回答は、そのまま『セレクトボックスの数を増やしたい』という質問に対する回答として書きましたので、意味が全然違うものになっています。
質問にHTMLの記載がないためセレクトボックスの数が不明なので、質問文の通り3ペア(6個)設置しているのだと推測しました。
(そのままでもOKという結果だけは同じですが…)
オプションを増やす場合は、親のオプションと、子のオプションの数を合せて置かないと不具合が生じるので、当然ながらエラーになります。
教えていただいたとおりchildArray[4]を定義したら
うまくいきました!
オプションとセレクトボックスを勘違いしていました。
お手数をおかけし、申し訳ありませんでした。
(暮らすの内容も抜けていました)
勉強し直します・・・。
No.2
- 回答日時:
元ソースの構造があまりよいとは言えないので、なんとも言えませんが
>「子育て」の子セレクトが表示されなくなりました。
については、親の要素数が5個あり、子育ては0から始めて4番目の要素ですね。
一方childArrayは3番目までしか設定されていないので、当然最後の
要素の子育ては連携要素がないと判断されています。
No.1
- 回答日時:
まったく同じ動作で(現状で予定通り動作しているのであれば)、個数だけ増やしたいのならスクリプトはそのままでよいはず。
(特に数に制限はない)HTMLソースでセレクトのペアを増やせばいいだけ。
それよりもautoOptions()でいきなり、セレクトの数を拾っているので、同じページ中に関係の無いセレクトが混じっていたりすると、エレメントが無いみたいなエラーになるかも…
早速の回答ありがとうございます。
>HTMLソースでセレクトのペアを増やせばいいだけ。
セレクトのペアはjavascript内で書いているようなので、うまくいかずに困っています。
親と子のセレクトペアを増やしたら、下記のように「子育て」の子セレクトが表示されなくなりました。
http://stage.chiikeys.jp/t_test/form.html
>それよりもautoOptions()でいきなり
了解しました。調べてみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンでreadonlyの切替え
-
Null またはオブジェクトではあ...
-
乗換案内 VBAで操作したい
-
XMLでのAttributeを持ったNode...
-
DOM要素を削除しても、イベント...
-
if(document.all && navigator....
-
mousewheelイベントについて
-
文字を一文字ずつ表示
-
VBAでIEのボタンを押してメッセ...
-
回答するたびに回答の種類、ど...
-
google マップ サイズ変更
-
javascriptの基本的なことだと...
-
VBAにて、セルの内容と一致...
-
変更したstyleの値を変更前に戻...
-
食材の期限を管理するためにGAS...
-
ActiveXobjectが作成できない
-
javascriptで入力フォームに日...
-
idを使わずにonclickで自身の要...
-
同じIDで定義した要素の配列を...
-
ASP.NETのコントロールの値をJa...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字を一文字ずつ表示
-
DOM要素を削除しても、イベント...
-
javascriptの基本的なことだと...
-
Latexに関する質問です。
-
Null またはオブジェクトではあ...
-
FireFoxのjavascriptで自動でキ...
-
excle VBA とweb上の検索を利用...
-
乗換案内 VBAで操作したい
-
クリッカブルマップのリンク部...
-
document.onkeydownについて
-
XMLでのAttributeを持ったNode...
-
VBAでIEのボタンを押してメッセ...
-
ラジオボタンでreadonlyの切替え
-
JavaScript window.openで開く...
-
javascriptのdocument.allにつ...
-
onClickイベントの変更方法
-
compatModeとは?
-
WSHのIEオブジェクト操作後のク...
-
ラジオボタンをクリックしたい
-
showModalDialogで開いた画面を...
おすすめ情報