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>
お礼
やっぱり無理なんですか～。 今回は諦めます^^; ありがとうございました。