選択肢変更型セレクトボックスの非干渉設置法

以下のように、最初の親セレクトボックスで2番目の子セレクトボックスの選択肢を絞り込む、ソースコードがあります。
同じHTML中に全く別の選択要素を持った、同じ働きをする親子セレクトボックスを複数設置したいのですが（例えば、親要素＝学区、子要素＝その学区内毎の学校名）、お互いに干渉しない様に、2つ目以降の親子セレクトボックスを複数設置して行くには、2番目以降をどの様に改良したらよろしいでしょうか。
ご教授下さい。

以下HEAD要素========
names1=new Array('↓駅名を選んで下さい','A駅','B駅','C駅','D駅','E駅');
value1=new Array('↓駅名を選んで下さい','A駅','B駅','C駅','D駅','E駅');
names2=new Array('↓駅名を選んで下さい','F駅','G駅','H駅','I駅');
value2=new Array('↓駅名を選んで下さい','F駅','G駅','H駅','I駅');
names3=new Array('↓駅名を選んで下さい','J駅','K駅','L駅');
value3=new Array('↓駅名を選んで下さい','J駅','K駅','L駅');
names=new Array('',names1,names2,names3);
values=new Array('',value1,value2,value3);
len=0;
for(i=0; i<names.length; i++)if(names[i].length > len)len=names[i].length;
dore=0;
function SelectChange(no){
if(no < 9){
no = '0'+no;
}
dore=document.getElementById('LINE'+no).selectedIndex;
if(dore != 0){
atai=0;
for(i=0; i<len; i++){
if(names[dore].length < len && names[dore].length <= i){
document.getElementById("STA"+no+1).options[i-atai]=null;
atai++;
}else{
document.getElementById("STA"+no+1).options[i]=new Option(names[dore][i],i);
document.getElementById("STA"+no+1).options[i].value=values[dore][i];
}
}
}
}
以下BODY要素========
親=
<select name=LINE01 id=LINE01 onChange=SelectChange(1) style="width:160px;">
<option value=''>↓沿線名を選んで下さい</option>
<option value='路線1線'>路線1線</option>
<option value='路線2線'>路線2線</option>
<option value='路線3線'>路線3線</option>
</select>
子=
<select id=STA011 style="width:160px;" size=1 name=STA011>
<option name=1 id=1 value=''>--------</option>
</select>

No.1 ベストアンサー 回答者： yambejp 回答日時： 2010/02/05 10:03

たとえば・・・

選択した”次の”セレクトボックスの値を変更すればよいでしょう。
ちなみに、競合しないのでセレクトボックスごとに路線の組み合わせは
自由にできます。
あとは路線の構造があまりに・・・だったので、こんな感じが
わかりやすいと思います。

<script>
function SelectChange(obj){
var datas={
"路線1線":[{"name":"A駅","value":"AA駅"},{"name":"B駅","value":"BB駅"},{"name":"C駅","value":"CC駅"},{"name":"D駅","value":"DD駅"},{"name":"E駅","value":"EE駅"}]
,"路線2線":[{"name":"F駅","value":"FF駅"},{"name":"G駅","value":"G駅"},{"name":"H駅","value":"H駅"},{"name":"I駅","value":"I駅"}]
,"路線3線":[{"name":"J駅","value":"JJ駅"},{"name":"K駅","value":"KK駅"},{"name":"L駅","value":"LL駅"}]
,"路線4線":[{"name":"M駅","value":"MM駅"},{"name":"N駅","value":"NN駅"}]
};
var n=obj;
while(n=n.nextSibling){if(n.nodeName=="SELECT") break;} //次のSELECTを探す
while(n.firstChild){n.removeChild(n.firstChild);} //次のSELECTの中身を削除
var opt=document.createElement("option");
if(obj.value==""){
//路線を選ばなかった場合の処理
opt.setAttribute("value","");
opt.appendChild(document.createTextNode("--------"));
n.appendChild(opt);
}else{
//路線を選ばんだ場合の１行目処理
opt.setAttribute("value","");
opt.appendChild(document.createTextNode("↓駅名を選んで下さい"));
n.appendChild(opt);
//オプションを入れ込む処理
var data=datas[obj.value];
for(var i=0;i<data.length;i++){
var opt=document.createElement("option");
opt.setAttribute("value",data[i].value);
opt.appendChild(document.createTextNode(data[i].name));
n.appendChild(opt);
}
}
}
</script>
<style>
#f0 select{
width:160px;
}
</style>

<form id="f0">
<div>
<select name="LINE01" onChange="SelectChange(this)">
<option value=''>↓沿線名を選んで下さい</option>
<option value='路線1線'>路線1線</option>
<option value='路線2線'>路線2線</option>
<option value='路線3線'>路線3線</option>
</select>
<select name="STA011">
<option value=''>--------</option>
</select>
</div>
<div>
<select name="LINE02" onChange="SelectChange(this)">
<option value=''>↓沿線名を選んで下さい</option>
<option value='路線1線'>路線1線</option>
<option value='路線2線'>路線2線</option>
</select>
<select name="STA022">
<option value=''>--------</option>
</select>
</div>
<div>
<select name="LINE03" onChange="SelectChange(this)">
<option value=''>↓沿線名を選んで下さい</option>
<option value='路線1線'>路線1線</option>
<option value='路線3線'>路線3線</option>
<option value='路線4線'>路線4線</option>
</select>
<select name="STA033">
<option value=''>--------</option>
</select>
</div>
</form>

この回答へのお礼

yambejp様
早速のご返答、有難うございました。
各テキストボックスが競合していないので、
様々な組み合わせで登録の設定ができそうです。
期待した結果を得る事ができました。

有難うございました。

お礼日時：2010/02/05 12:16

No.2 回答者： fujillin 回答日時： 2010/02/05 10:48

普通に考えれば、

配列を1次元を増やして、selectの数に対応するようにする。
とか、
オブジェクト的に対応できるように書き換える。
みたいになるでしょうけど、連動セレクトの処理をライブラリ化したものがあるみたい。

http://d.hatena.ne.jp/Mars/20071109

HTML側にデータを持たせているので、javascriptがオフの場合でも一応動作できるように考えられているようです。

この回答へのお礼

fujillin様
情報提供、有難うございます。
参考にして、勉強させて頂きます。
有難うございました。

お礼日時：2010/02/05 12:21