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

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

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

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

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


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

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2016/09/26 11:31

<!--

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>

この回答へのお礼

素晴らしいです！
これ動いたら本当にたすかります！
どうもありがとうございました！

お礼日時：2016/09/26 22:13

No.1 回答者： yambejp 回答日時： 2016/09/26 11:24

無駄なトラフィックを減らすためにも普通はajaxでデータはサーバー側で管理します

ajaxを利用する場合やはりjQueryのようなライブラリがあったほうが処理は楽です
データのもたせ方はサーバー側のプログラムで配列で持ってもいいですが
メンテナンス性を考慮すればRDBなど利用したほうがよいでしょう