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

この記事は約2分で読めます。

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

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

応用として、

  1. 「セレクトボックス①」を選んだ場合
  2. 選んだ内容によって「セレクトボックス②」の要素を変える

というケースはあるかと思うので使い様によってはアリなのかと思います。

デモはこちら

本当はデータベースを使って実現するべきなんでしょうが、今回はお手軽に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