こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

3連セレクトボックスで選択肢を変更し条件を絞り込む

現在、JavaScriptの勉強中です。
三つの連動したセレクトボックスを利用して選択肢を絞り込もうと考えています。
例えば最初のセレクトボックスで「都道府県」を選択させ、選んだ段階で、二番目のセレクトボックスに選んだ都道府県の中にある「市町村」を表示させる、
次に二番目の「市町村」の一つを選んだ段階で、三番目のセレクトボックスに選んだ「市町村」内の支店名を表示させ選択させる。というものです。

以下のようなソースがあるのですが、この内容だと、最初の選択肢の数が10個を超えた段階で次の選択肢が作動しなくなる事が、
動作上で確認されました。
一つのセレクトボックスの選択肢の数を100個程度、或いは、理論上無制限にするには、どの様にしたらよいかを考えています。
できれば、現在のソースのロジックの解説も併せて、ご教授頂ければ幸いです。

以下JavaScript内容---------------
var data = new Array("都道府県は?","東京都","神奈川","千葉");
var data0 = new Array("---");
var data1 = new Array("区は?","千代田区","中央区","品川区");   
var data2 = new Array("市町村は?","横浜市","川崎市");    
var data3 = new Array("市町村?","千葉市","市原市");    
var data10 = new Array("---");
var data11 = new Array("支店名は?","千代田1号店","千代田2号店","千代田3号店");
var data12 = new Array("支店名は?","中央区1号店","中央区2号店","中央区3号店","中央区4号店","中央区5号店");
var data13 = new Array("支店名は?","品川1号店","品川2号店");
var data20 = new Array("---");
var data21 = new Array("支店名は?","横浜1号店","横浜2号店","横浜3号店","横浜4号店");
var data22 = new Array("支店名は?","川崎1号店","川崎2号店","川崎3号店");
var data30 = new Array("---");
var data31 = new Array("支店名は?","千葉1号店","千葉2号店");
var data32 = new Array("支店名は?","市原1号店");
function SetList(objid, arr){
var obj = document.getElementById(objid);
for(i=obj.length; i>=0; i--){ obj.options[i] = null; }
for(i=0; i<arr.length; i++){
obj.options[i] = new Option(arr[i]);
obj.options[i].value = arr[i];}}

以下、HTML内容---------------
<body onLoad="SetList('sel0', data);" style="margin:0px;">
<div>
<form>
<select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel2',data0);SetList('sel1', eval('data' + this.selectedIndex))">
<option>---</option>
</select>
<select id="sel1" name="sel1" style="width:160px;" onChange="SetList('sel2', eval('data' + document.forms[0].sel0.selectedIndex + this.selectedIndex))">
<option>---</option>
</select>
<select id="sel2" name="sel2" style="width:160px;">
<option>---</option>
</select>
</form>
</div>
</body>

投稿日時 - 2010-01-29 16:42:05

QNo.5632863

すぐに回答ほしいです

質問者が選んだベストアンサー

selectedIndex(選択項目番号)の返す値を使って配列へアクセスし
配列要素に合わせoption要素を生成してますね。これ自体は単純なものですから
データ構造だけ抑えておけば良いと思います。例えば

select要素'sel0'で扱うdataは配列名をそのままに
select要素'sel1'で扱う配列に一文字足して配列名をdataA...とましょう。
select要素'sel2'で扱う配列はdataB...とします。

配列名でグループ化し、これに合わせソースコードを以下に変更します。

onChange="SetList('sel2',dataA0);SetList('sel1', eval('dataA' + this.selectedIndex))"
onChange="SetList('sel2', eval('dataB' + document.forms[0].sel0.selectedIndex + this.selectedIndex))"

dataAのグループはdataの各要素に関連付けされます。
dataの要素数が5なら、dataA0~dataA4の5つが必要になります。

var data = new Array("都道府県は?", "東京都", "神奈川", "千葉", "hoge"); //要素を一つ追加
var dataA0 = new Array("---");
var dataA1 = new Array("区は?", "千代田区", "中央区", "品川区");   
var dataA2 = new Array("市町村は?", "横浜市", "川崎市");    
var dataA3 = new Array("市町村?", "千葉市", "市原市");
var dataA4 = new Array("市町村?", "hoge市", "piyo市", "fuga市"); //追加したdata[4]に対応

//dataBのグループはdataA0~dataA4それぞれの各要素に対応します。

var dataB10 = new Array("---");
var dataB11 = new Array("支店名は?", "千代田1号店", "千代田2号店", "千代田3号店");
var dataB12 = new Array("支店名は?", "中央区1号店", "中央区2号店", "中央区3号店", "中央区4号店", "中央区5号店");
var dataB13 = new Array("支店名は?", "品川1号店", "品川2号店");
var dataB20 = new Array("---");
var dataB21 = new Array("支店名は?", "横浜1号店", "横浜2号店", "横浜3号店", "横浜4号店");
var dataB22 = new Array("支店名は?", "川崎1号店", "川崎2号店", "川崎3号店");
var dataB30 = new Array("---");
var dataB31 = new Array("支店名は?", "千葉1号店", "千葉2号店");
var dataB32 = new Array("支店名は?", "市原1号店");

//dataA4の各要素に対応した配列集合
var dataB40 = new Array("---"); //dataA4[0]に対応
var dataB41 = new Array("支店名は?", "hoge1号店", "hoge2号店"); //dataA4[1]に対応
var dataB42 = new Array("支店名は?", "piyo1号店"); //dataA4[2]に対応
var dataB43 = new Array("支店名は?", "fuga1号店", "fuga2号店"); //dataA4[3]に対応

要素数100の配列data末尾要素に対応する配列はdataA99
配列dataA99の要素n個に対応する配列はdataB990~dataB99(n - 1)となります。

投稿日時 - 2010-01-29 22:53:55

お礼

my-- 様
早速のご返答、有難うございました。
ご指導の通りに、ソースコードを改良し、
作動することも確認できました。
当初の目的が達成できました。
感謝いたします。
有難うございました。

投稿日時 - 2010-01-30 09:36:07

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問