セレクトメニューの4連動
いつも参考にさせて頂いております。
javascript初心者です。
現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。
一つ目のセレクトで、地域の選択
二つ目のセレクトで、県の選択
三つ目のセレクトで、「プレイスポット」か「食事」の選択
四つ目のセレクトでは、
プレイスポット名(三つ目でプレイスポット選択時)
お店名(三つ目で食事選択時)
上記したようにしたいのです。宜しくお願いします。
<html>
<head>
<script type="text/javascript">
<!--
var area=0;
function setA(n)
{
aa=n;
data1 =
[
["東京","神奈川"],
["大阪","神戸"],
];
len = document.form1.box_a.options.length;
for(i=len-1; i>0; --i)
document.form1.box_a.options[i] = null;
if(n!=0)
{
document.form1.box_a.style.visibility = "visible";
for(i=0; i<data1[n-1].length; i++)
document.form1.box_a.options[i+1] = new Option(data1[n-1][i]);
}
setB(0);
}
function setB(n)
{
data2 =
[
[["プレイスポット","食事"],["プレイスポット","食事"]],
[["プレイスポット","食事"],["プレイスポット","食事"]]
];
len = document.form1.box_b.options.length;
for(i=len-1; i>0; --i)
document.form1.box_b.options[i] = null;
if(n==0)return;
document.form1.box_b.style.visibility = "visible";
for(i=0; i<data2[aa-1][n-1].length; i++)
document.form1.box_b.options[i+1] = new Option(data2[aa-1][n-1][i]);
setC(0);
}
function setC(n)
{
data3 =
[
[[["としまえん","よみうりランド"],["キハチ","久兵衛"]]],
[[["江ノ島","鎌倉"],["カレーミュージアム","中華街"]]],
[[["ユニバーサルスタジオ","天王寺動物園"],["かに道楽","金龍ラーメン"]]],
[[["須磨海浜水族園","グリコピア"],["コンチェルト","六甲山牧場"]]]
];
len = document.form1.box_c.options.length;
for(i=len-1; i>0; --i)
document.form1.box_c.options[i] = null;
if(n==0)return;
document.form1.box_c.style.visibility = "visible";
for(i=0; i<data3[aa-1][n-1][n-1].length; i++)
document.form1.box_c.options[i+1] = new Option(data3[aa-1][n-1][n-1][i]);
}
//-->
</script>
</head>
<body>
<form name="form1">
<select name="sel1" onChange="setA(this.selectedIndex)">
<option value="0" selected>▼選択してください</option>
<option value="1">関東</option>
<option value="2">関西</option>
</select>
<select name="box_a" onChange="setB(this.selectedIndex)"><option value="0" selected>---------------</option></select>
<select name="box_b" onChange="setC(this.selectedIndex)"><option value="0" selected>---------------</option></select>
<select name="box_c" onChange=""><option value="0" selected>---------------</option></select>
</form>
</body>
</html>
補足
Ajaxです。 Apache Tomcatでサーバを動かし、sqlでデータベースを構築して・・・ということを目標にしています。