セレクトメニューの4連動

締切済

質問者：menta2000
質問日時：2008/05/03 03:34
回答数：4件

いつも参考にさせて頂いております。
javascript初心者です。
現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。

一つ目のセレクトで、地域の選択
二つ目のセレクトで、県の選択
三つ目のセレクトで、「プレイスポット」か「食事」の選択
四つ目のセレクトでは、
プレイスポット名(三つ目でプレイスポット選択時)
お店名(三つ目で食事選択時)
上記したようにしたいのです。宜しくお願いします。

<html>
<head>
<script type="text/javascript">

</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>

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： yambejp
回答日時：2008/05/03 15:49

データ構造がわかりにくい・・・

最終的に必要なのは４番目のセレクトメニューだけですよね？
ならいっそのことこんなかんじでどうでしょ？

<html>
<head>
<style>
select{
width:150px;
}
</style>
<script>
var data={
関東:{
東京:{
プレイスポット:{0:"としまえん",1:"よみうりランド"}
,食事:{0:"キハチ",1:"久兵衛"}
}
,神奈川:{
プレイスポット:{0:"江ノ島",1:"鎌倉"}
,食事:{0:"カレーミュージアム",1:"中華街"}
}
}
,関西:{
大阪:{
プレイスポット:{0:"ユニバーサルスタジオ",1:"天王寺動物園"}
,食事:{0:"かに道楽",1:"金龍ラーメン"}
}
,神戸:{
プレイスポット:{0:"須磨海浜水族園",1:"グリコピア"}
,食事:{0:"コンチェルト",1:"六甲山牧場"}
}
}
};
window.onload=function(){
s0=document.getElementById("s0");
s1=document.getElementById("s1");
s2=document.getElementById("s2");
s3=document.getElementById("s3");
setSelect(data,s0);
s0.onchange=function(){
clearSelect(s2);
clearSelect(s3);
if(this.value==""){
clearSelect(s1);
}else{
setSelect(data[this.value],s1);
}
}
s1.onchange=function(){
clearSelect(s3);
if(this.value==""){
clearSelect(s2);
}else{
setSelect(data[s0.value][this.value],s2);
}
}
s2.onchange=function(){
if(this.value==""){
clearSelect(s3);
}else{
setSelect(data[s0.value][s1.value][this.value],s3);
}
}
}
function setSelect(obj,sel){
while(lc=sel.lastChild){
sel.removeChild(lc);
};
var op=document.createElement("option");
op.setAttribute("value","");
op.appendChild(document.createTextNode("▼選択してください"));
sel.appendChild(op);
for(var i in obj){
var txt=(typeof obj[i]=="object")?i:obj[i];
var op=document.createElement("option");
op.setAttribute("value",i);
op.appendChild(document.createTextNode(txt));
sel.appendChild(op);
}
}
function clearSelect(sel){
while(lc=sel.lastChild){
sel.removeChild(lc);
};
var op=document.createElement("option");
op.appendChild(document.createTextNode("---------------"));
sel.appendChild(op);
};

</script>
</head>
<body>
<form id="f0">
<select id="s0">
<option value="">▼選択してください</option>
</select>
<select id="s1">
<option value="">---------------</option>
</select>
<select id="s2">
<option value="">---------------</option>
</select>
<select id="s3" name="place">
<option value="">---------------</option>
</select>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
すごく参考になります。
ありがとうございました。
では、失礼します。

通報する

お礼日時：2008/05/04 11:07

No.3

回答者： auty
回答日時：2008/05/03 11:40

「訂正」最後のfor文も同じくbbを使います。

今は数が同じだからそのままでも動きました。
for(i=0; i<data3[aa-1][bb-1][n-1].length; i++)

- 0
- 件

通報する

No.2

回答者： auty
回答日時：2008/05/03 11:28

・　配列がむやみに複雑になっていて改良の余地があると思いますが、とりあえず修正点を挙げてみます。

・　setA(n)のaa=n;と同じように、setB(n)にbb=n; を加えます。それを、setC(n)の
document.form1.box_c.options[i+1] = new Option(data3[aa-1][bb-1][n-1][i]);
で利用します。

・　配列data3の構造を変えます。

以下のコードを参考にしてみてください。
------------------------------------------------------------
function setB(n)
{
bb=n;
data2 =
------------------------------------------------------------

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][bb-1][n-1][i]);
}