人に聞けない痔の悩み、これでスッキリ >>

 セレクトが[都道府県][市区町村]のふたつがあって、
都道府県選択すると、自動的に市区町村のセレクト内容が変わるってやつあるじゃないですか、あれってどうやってやるんでしょう?
 いざ調べようと思ったら、そんなページどこにあるかわらなくて、ソースも見れないから、ちょっと困ってます。
 ちなみに、その場合、市区町村のデータって膨大ですよね、できればCSVデータ(すでに制作済み)を活用したいのですができますでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

http://www.geocities.co.jp/SiliconValley/4334/un …

↑これのことですよね?

上記サンプル程度の数量ならクライアント側にデータ全てを渡しても支障ないですが、
これを42都道府県全てを対象に行うというのであれば、データが大きすぎるので避けた方が良いと思います。
(何百KBというhtmlになりそうですので)

私が42都道府県対象に上記のような機能を実装するのであれば、都道府県のドロップダウンリストにonChangeイベントを付け、都道府県の情報だけサーバーに渡し、
後はサーバーサイドで対応した市区町村をクライアントに返すように作ると思います。

で、サーバーサイドにASPを利用した方法であれば、
http://www.geocities.co.jp/SiliconValley/4334/un …

にサンプルがあります。
(注:上記サイトは私が制作したわけではありませんので、あしからず)

参考まで

参考URL:http://www.geocities.co.jp/SiliconValley/4334/un …
    • good
    • 0
この回答へのお礼

ASP・・・私には無理です(笑)
お気持ちだけ、ありがとうございました。

お礼日時:2001/08/26 20:00

ご質問のページがどのように作っているかは解りませんが、JavaScriptを使って変更する事ができます。



一つ目のセレクトの値をonChangeイベントハンドラーでScriptのプログラムに渡してやって、if文で分岐した2つ目のセレクタの内容を返してやります。
しかし、都道府県の様な内容になると、先のご指摘の通り、非現実的処理だと思います。

ご希望で有れば別途サンプルを掲載します。
    • good
    • 0
この回答へのお礼

結局、都道府県から、市町村のページへ一度ジャンプさせました。ありがとうございました

お礼日時:2001/08/26 19:59

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qjsによって検索プルダウン、都道府県選択と市区町村選択を連動させたい

いつもお世話になっております。
掲題のとおり、

jsによって検索プルダウン、都道府県選択と市区町村選択を連動させたいと考えております。
東京都と都道府県選択で選択すると、市区町村選択は東京23区のみでるイメージです。

プルダウン連動のサンプルなどはあり、作ろうと思えば作れるのですが
いかんせん全国となると作業時間がかかってしまうことを懸念しております、、、

どこかにサンプルなど転がっていたら教えていただけないでしょうか、、、


どうぞよろしくお願いいたします。

Aベストアンサー

<!-- http://www.soumu.go.jp/denshijiti/code.html より作成, データ量約30kB -->
<script id=jisx0401 type=application/x-data>
01000:北海道{01100:札幌市,01202:函館市,01203:小樽市, ... ,01694:羅臼町}
02000:青森県{02201:青森市,02202:弘前市,02203:八戸市, ... ,02450:新郷村}
...
47000:沖縄県{47201:那覇市,47205:宜野湾市,47207:石垣市, ... ,47382:与那国町}
</script>

<script>
(function(D){ _=0;
_ ; function P(s){ var a = [], m, r = /(\d+?):(.+?)\{(.+?)\}/g; while (m = r.exec(s)) a.push( {code:m[1], name:m[2], locals:T(m[3])} ); return a }
_ ; function T(s){ var a = [], m, r = /(\d+?):(.+?)(?:,|$)/g; while (m = r.exec(s)) a.push( {code:m[1], name:m[2]} ); return a }
_ ; var municipalities = P(D.scripts['jisx0401'].textContent);
_ ; var localsMap = municipalities.reduce(function(p,v){p[v.code] = v.locals; return p}, {});
_ ; function O(s){ return function(d){var o = s.appendChild(D.createElement('option')); o.value = d.code; o.textContent = d.name}; }
_ ; D.addEventListener('DOMContentLoaded', function(ev){
_ ; _ ; var g = D.forms['areas'].elements['g'];
_ ; _ ; municipalities.forEach( O(g) );
_ ; _ ; g.addEventListener('change', function(ev){
_ ; _ ; _ ; var locals = localsMap[ev.target.value];
_ ; _ ; _ ; var t = D.forms['areas'].elements['t'];
_ ; _ ; _ ; while (t.firstChild != t.lastChild && t.lastChild) t.removeChild(t.lastChild);
_ ; _ ; _ ; if (locals) locals.forEach( O(t) );
_ ; _ ; }, false);
_ ; }, false);
})(document);
</script>

<form name=areas>
<select name=g><option>-</option></select>
<select name=t><option>-</option></select>
<button type=submit>go</button>
</form>

<!-- http://www.soumu.go.jp/denshijiti/code.html より作成, データ量約30kB -->
<script id=jisx0401 type=application/x-data>
01000:北海道{01100:札幌市,01202:函館市,01203:小樽市, ... ,01694:羅臼町}
02000:青森県{02201:青森市,02202:弘前市,02203:八戸市, ... ,02450:新郷村}
...
47000:沖縄県{47201:那覇市,47205:宜野湾市,47207:石垣市, ... ,47382:与那国町}
</script>

<script>
(function(D){ _=0;
_ ; function P(s){ var a = [], m, r = /(\d+?):(.+?)\{(.+?)\}/g; while (m = r.exec(s)) a.pus...続きを読む


人気Q&Aランキング