みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

複数セレクトメニュー連動の追加の仕方について、教えてください

こんにちは、javascriptを使ったセレクトメニュー連動について教えてください
<BODY>
<script language="JavaScript">
<!--
menuItem = [["--------"],
["北海道"],
["青森県","岩手県","宮城県","秋田県","山形県","福島県"],
["茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県"],
["新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県"],
["三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県"],
["鳥取県","島根県","岡山県","広島県","山口県"],
["徳島県","香川県","愛媛県","高知県"]]
menuval = [["dammy"],
["1-1"],
["2-1"],
["3-1","3-2","3-3","3-4","3-5","3-6","3-7"],
["4-1","4-2","4-3","4-4","4-5","4-6","4-7","4-8","4-9"],
["5-1","5-2","5-3","5-4","5-5","5-6","5-7"],
["6-1","6-2","6-3","6-4","6-5"],
["7-1","7-2","7-3","7-4"]]
function setMenu(n){
itemNum = menuItem[n].length;
document.myForm.Computer.length = itemNum;
for (i=0; i<itemNum; i++)
{
document.myForm.Computer.options[i] = new Option(menuItem[n][i],menuval[n][i]);
}
document.myForm.Computer.style.visibility = "visible";
}
// -->
</script>
<form name="myForm" method="POST" action="test.php" enctype="multipart/form-data" accept-charset="UTF-8">
<select name="Maker" onChange="setMenu(this.selectedIndex)">
<option value="dammy">--------</option>
<option value="omosiro">北海道地方</option>
<option value="syougeki">東北地方</option>
<option value="cinema">関東地方</option>
<option value="game">中部地方</option>
<option value="music">近畿地方</option>
<option value="sports">中国地方</option>
<option value="car">四国地方</option>
</select>
<select name="Computer" style="visibility:hidden">
<option value="dammy">--------</option>
</select>
<br>
<input type="reset" value="全ての入力をやり直す" onclick="location.reload()">
<INPUT type="submit" value="phpファイルにフォームからの入力データを渡す">
</form>
</BODY>

現在2つのセレクトメニュー連動まではできたのですが、さらにもう1段階追加しようとしてつまずいています。
まず1段階目のセレクトメニューで「東北地方」を選択したら、「青森県」「岩手県」などが右に新たなセレクトメニューとして出てきます。
その中からたとえば、「岩手県」を選択したら次に(つまり右側に)新たに「盛岡市」「宮古市」「平泉町」などが新たにセレクトメニューとして表示されるようにしたいのですがどうもうまくいきません
3段階目のセレクトメニューもうまく表示させる方法はないでしょうか。よろしくお願いします。

投稿日時 - 2008-10-23 19:49:48

QNo.4424292

困ってます

質問者が選んだベストアンサー

そのまま拡張するなら、3次元配列にするのが正しいかも。(データ構造的にはそうだし)
でも、データは手入力じゃなくて、どこかにあるものを利用するのではないかと思いますので、そのデータ構造に合わせておくのが、後々便利かと思います。(市町村の合併とかあるし)

ANo2さんと同じ発想ですが、連想配列を利用することにして(多分、元データもこんなふうになっていそうと考えて)、データさえ定義しておけば、何連でも可能なものを考えてみました。
データが定義されていて、フォーム内にセレクトタグが設定されていれば、それを利用します。タグがない場合は、そこで打ち切ります。
(下の例では、東京千代田区を選ぶと合計5連になります)

ただし、実際には市レベルになるとキーがダブってしまいそうなので、注意が必要です。
送信後のデータ処理が不明なので、とりあえずvalueはタグのname+"-番号"になっています。

<html>
<head>
<script>
var sBox=[];
var iData={'全国':'北海道地方,東北地方,関東地方',
'北海道地方':'北海道',
'東北地方':'青森県,岩手県,宮城県',
'関東地方':'茨城県,栃木県,東京都',
'北海道':'函館市,札幌市,旭川市',
'岩手県':'盛岡市,宮古市,平泉市',
'東京都':'23区,武蔵野市,三鷹市,調布市,府中市',
'23区':'千代田区,中央区,港区,文京区,新宿区,渋谷区,台東区,墨田区',
'千代田区':'旭町,淡路町,飯田橋,内幸町,神田' };

function menu(sel){
for (i=0, seln=-1; i<sBox.length; i++){if (sBox[i]==sel) seln=i;}
if (seln>-1){
var selkey=sel.options[sel.selectedIndex].text;
if (selkey=='----') selkey='';
if (seln+1<sBox.length) set(seln+1,selkey);
}
}
function set(n,key){
var s=sBox[n]; var dat=[];
for (i=0; i<s.options.length; i++) s.options[0]=null;
if (key && iData[key]){
dat=('----,' + iData[key]).split(',');
for (i=0; i<dat.length; i++) s.options[i]=new Option(dat[i],s.name+'-'+i);
}
s.style.visibility=(dat.length)?'visible':'hidden';
if (n+1<sBox.length) set(n+1,'');
}
window.onload=function(){if (sBox=document.Form1.getElementsByTagName('select')) set(0,'全国');}
</script>
</head>

<body>
<form name="Form1" method="POST" action="test.php">
<select name="area" onChange="menu(this)" style="visibility:hidden"></select>
<select name="prefecture" onChange="menu(this)" style="visibility:hidden"></select>
<select name="city1" onChange="menu(this)" style="visibility:hidden"></select>
<select name="city2" onChange="menu(this)" style="visibility:hidden"></select>
<select name="city3" onChange="menu(this)" style="visibility:hidden"></select>
<p>
<input type="reset" value="クリア" onclick="set(0,'全国')">
<input type="submit" value="送信">
</form>
</body>
</html>

投稿日時 - 2008-10-27 15:07:37

お礼

こんにちは、返事遅れてすいません。
上のソースコードを元に改造してやっと自分の欲しい機能が実装できました。
やっぱりまだまだ勉強が必要のようです。
今回は本当にありがとうございました。

投稿日時 - 2008-11-12 20:09:59

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

反応がないようなので
<html>
1<select id="a" onChange="SSO('b',st[this.value])"></select>
2<select id="b" onChange="SSO('c',st[this.value])"></select>
3<select id="c"></select>
<script>
var st=[];
st['日本']='北海道地方 東北地方 関東地方 中部地方';

st['北海道地方']='北海道';
st['東北地方']='青森県 岩手県 宮城県 秋田県 山形県 福島県';
st['関東地方']='茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県';
st['中部地方']='新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県';

st['岩手県']='盛岡市 宮古市 平泉町 洋野町';

window.onload=function(){SSO('a',st['日本']);}
function SSO(id_name , text){
var text_array =('--- '+text).split(' ');
var o = document.getElementById( id_name );
while( o.hasChildNodes() ) o.removeChild( o.lastChild );
for(var i=0, n, mx = text_array.length; i<mx; i++){
var n = new Option( text_array[i], text_array[i]);
try{ o.add( n, null) } catch( ex ){ o.add( n ); }
}
}
</script>
でも全国制覇は大変よ~!?
完成したら地域データくださいね^^;

投稿日時 - 2008-10-25 10:57:37

補足

返事遅くなってすいません

いや、ちょっと岩手ではないです(^-^)

改良したスクリプトありがとうございます
一番最初に出したスクリプトなのですけれども、もともと別のサイトにサンプルとして配布されていたものを自分でなんとか改造したものです。
実際にブラウザで表示させてみるとわかりますけれども、
最初のセレクトメニューで選択する

style="visibility:hidden"で隠していた次のセレクトメニューが右側に現れる
という形になっています。

これをさらに1段階進めて同じようにして3番目のセレクトメニューが現れるようにしたいのですが、1段階目と異なり元の<option>~</option>の所が固定ではないためにつまっている状態です。
自分がなんとか理解できているのはhtmlとphpぐらいなのでよく分からなくなっています。

投稿日時 - 2008-10-28 14:02:37

ANo.1

http://oshiete1.goo.ne.jp/qa4135781.html

過去に4連なんてあった。
リストもセレクトも似たようなもんだから

ところで岩手?俺もだけど・・・

投稿日時 - 2008-10-24 02:10:05

あなたにオススメの質問