セレクトボックスで都道府県に応じて市区町村を動的に変更する

住所の入力するフォームで「都道府県を選んだときに、市区町村を限定して選べるようにしたい」なんてことがあるのでしょうか…。

最近は郵便番号で市区町村まで補完するようなのが一般的なので使いどころは正直微妙です><

まぁ応用として「セレクトボックス①」を選んだ場合に「セレクトボックス②」の要素を自動的に変えるっていうのはアリか。。

デモはこちら

本当はデータベースを使って実現するべきなんでしょうが、今回はお手軽にXMLを使います。

$(document).ready(function(){$("#item_todoufuken").change(function () {// XML読み込みxmlLoad($(this).val());});});// -------------------------------------------------// XML読み込み// -------------------------------------------------function xmlLoad(no){$.ajax({url:'/demo/cities/'+no+'.xml',type:'get',async: false,dataType:'xml',timeout:2000,success:parse_xml});}// -------------------------------------------------// XMLデータを取得// -------------------------------------------------function parse_xml(xml,status){if(status!='success')return;$(".city_items").remove();$(xml).find('location').each(disp);}// -------------------------------------------------// HTML生成関数// -------------------------------------------------function disp(){//各要素を変数に格納var $day = $(this).find('city').text();//HTMLを生成$(''+$day+'').appendTo('#item_shikuchouson');}

optionのvalueの値に対応するファイル名、(例 1 → 1.xml)のようにルールを決めておいて、後はファイルの中身を読み込んでoption部分のHTMLを生成します。

統廃合により市区町村の名称が変更になった場合はその都度メンテナンスが必要です。

市区町村コードなどは下記のサイトをご参考下さい。
http://www.tt.rim.or.jp/~ishato/tiri/code/code.htm

最新情報をチェックしよう!