他にも似たような質問があるのですが、連動するプルダウンリストを作成しています。二次元配列を使ったものはあるのですが、三次元以上の多次元配列を使ったものがないので質問させて頂きました。下記のような内容でエリアと都道府県を選択できるプルダウンリストがあります。これをJavascriptの三次元配列を利用してさらに市町村を選択できるリストを作成したいと思っています。それぞれのプルダウンリストは、エリアの中でAを選択するとAのエリアの中にある都道府県が選択でき、都道府県を選択するとそれに該当する市町村が選択できるように連動するように作成したいと思っています。ご指導お願いします。 <!-- function hoge(area){ var t=new Array();//optionの項目(text) var v=new Array();//optionのvalue if(area=='A'){ t[0]='A-1';v[0]='A1'; t[1]='A-2';v[1]='A2'; t[2]='A-3';v[2]='A3'; t[3]='A-4';v[3]='A4'; t[4]='A-5';v[4]='A5'; } else if(area=='B'){ t[0]='B-1';v[0]='B1'; t[1]='B-2';v[1]='B2'; } else if(area=='C'){ t[0]='C-1';v[0]='C1'; t[1]='C-2';v[1]='C2'; t[2]='C-3';v[2]='C3'; } else if(area=='D'){ t[0]='D-1';v[0]='D1'; t[1]='D-2 hogehoge';v[0]='D2'; } else{t[0]='都道府県'} var obj=document.frm.s2.options; obj.length=0; for(i=0;i エリア名エリアＡエリアＢエリアＣエリアＤ都道府県

#1です。 #2のサンプルはが途中に一つ余計にありますので削除してください。（動作しか確認しなかった。）

連動するプルダウンリストの作成

解決済

質問者：angela0704
質問日時：2007/11/14 10:21
回答数：3件

他にも似たような質問があるのですが、連動するプルダウンリストを作成しています。
二次元配列を使ったものはあるのですが、三次元以上の多次元配列を使ったものがないので質問させて頂きました。

下記のような内容でエリアと都道府県を選択できるプルダウンリストがあります。
これをJavascriptの三次元配列を利用してさらに市町村を選択できるリストを作成したいと思っています。
それぞれのプルダウンリストは、エリアの中でAを選択するとAのエリアの中にある都道府県が選択でき、都道府県を選択するとそれに該当する市町村が選択できるように連動するように作成したいと思っています。

ご指導お願いします。

<html>
<head>
<script language="javascript"></script>
</head>

<body>

<form name='frm'>
<select onChange="hoge(this.options[this.options.selectedIndex].value)">
<option value=''>エリア名</option>
<option value='A'>エリアＡ</option>
<option value='B'>エリアＢ</option>
<option value='C'>エリアＣ</option>
<option value='D'>エリアＤ</option>
</select>

<select name='s2' size=1 onChange="alert(this.options[this.options.selectedIndex].value)">
<option>都道府県</option>
</select>
</form>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： steel_gray
回答日時：2007/11/14 22:38

#1です。

body部分は極力元のままで動くサンプルを書いてみました。

<html>
<head>
<title></title>
<script type="text/javascript">
function sampleSub(SEL,LIST){
while(SEL.options[1])SEL.remove(1);
if(LIST) {
for(var i=0;LIST[i];i++) {
var OPT = document.createElement('option');
OPT.value = LIST[i];
OPT.appendChild(document.createTextNode(LIST[i]));
SEL.appendChild(OPT);
}
}
SEL.selectedIndex = 0;
if(SEL.onchange)SEL.onchange(SEL,null);
}
function sample1(SEL){
var LIST = new Array();

LIST['関東']=['東京都','神奈川県'];
LIST['近畿']=['大阪府','兵庫県'];

sampleSub(
document.getElementsByName('s2')[0],
LIST[SEL.options[SEL.selectedIndex].value]);

}

function sample2(SEL){
var LIST = new Array();

LIST['東京都']=['品川区','渋谷区'];
LIST['神奈川県']=['横浜市','川崎市'];
LIST['大阪府']=['大阪市','吹田市'];
LIST['兵庫県']=['明石市','尼崎市'];

sampleSub(
document.getElementsByName('s3')[0],
LIST[SEL.options[SEL.selectedIndex].value]);
}
</script>
</head>
<body>

<form name='frm'>
<select onChange="sample1(this)">
<option value=''>エリア名</option>
<option value='関東'>関東</option>
<option value='近畿'>近畿</option>
</select>

<select name='s2' size=1 onChange="sample2(this)">
<option>都道府県</option>
</select>
</form>
<select name='s3' size=1">
<option>市町村</option>
</select>
</form>

</body>
</html>