都道府県・地域選択連動セレクトボックス～ JavaScript編～（DHTML関連） | 小技集

都道府県・地域選択連動セレクトボックス～ JavaScript編～

トップ > 小技集 > （DHTML関連）都道府県・地域選択連動セレクトボックス～ JavaScript編～

都道府県・地域xmlデータをJavaScriptのDOMで処理します。

　データ準備編では、都道府県・地域データを格納したxmlファイルを作成しました。お急ぎの場合はこちらからダウンロードできますが、これは私が2009年6月のデータを元に作成したものですので、実際にサイトで使用する場合は、日本郵便の最新のデータを元に作成していただくことをおすすめします。

　さて、今回はこのxmlファイルをJavaScriptのDOMを使って処理し、実際に下のような連動セレクトボックスを作成します。（IEのみ動作確認）

　ソースは下記のようになります。

<html>
<head>
<title>都道府県選択</title>
<script type="text/javascript">
<!--
 var objXML = new ActiveXObject("Microsoft.XMLDOM");
 objXML.async = false;
 objXML.load("prefectures.xml");
function select_prefectures(){
 var objPrefs = objXML.documentElement.childNodes;
 for(i=0; i<objPrefs.length; i++){
  var option = document.createElement("option");
  var text = document.createTextNode(objPrefs[i].attributes[1].nodeValue);
  var value = document.createAttribute("value");
  value.nodeValue = objPrefs[i].attributes[0].nodeValue;
  option.setAttributeNode(value);
  option.appendChild(text);
  document.getElementById("select1").appendChild(option);
 }
}
function select_areas(s){
 // まずはオプションを削除する
 old_options = document.getElementById("select2").childNodes;
 n = old_options.length;
 for (i=2; i<n; i++){
  document.getElementById("select2").removeChild(old_options[2]);
 }
 // 選択された都道府県に応じた地域オプションを追加していく
 var objAreas = objXML.documentElement.childNodes[s-1].childNodes;
 for(i=0; i<objAreas.length; i++){
  var option = document.createElement("option");
  var text = document.createTextNode(objAreas[i].childNodes[0].nodeValue);
  var value = document.createAttribute("value");
  value.nodeValue = objAreas[i].attributes[0].nodeValue;
  option.setAttributeNode(value);
  option.appendChild(text);
  document.getElementById("select2").appendChild(option);
 }
}
//-->
</script>
</head>
<body onload="select_prefectures()">
<form action="">
<select id="select1" onchange="select_areas(this.value)">
<option value="0">都道府県を選択してください。</option>
</select>
<select id="select2">
<option value="0">地域を選択してください。</option>
</select>
</form>
</body>
</html>

　上記のソースをコピペして適当な名前でhtmlファイルとして保存してください。
　都道府県・地域データ「prefectures.xml」を同じフォルダにおけば動作します。

ソース解読のためのヒント

ポイント１：ページ読み込み時に都道府県データを読み込む
	bodyタグのonloadイベントにJavaScriptのselect_prefectures関数を指定します。この関数内では、読み込んだxmlファイルからprefecture要素のリストを取得し、このリストでループして都道府県セレクトボックスのオプションを生成、追加していきます。

ポイント２：都道府県選択時に地域データを読み込む
	都道府県セレクトボックスのonchangeイベントにJavaScriptのselect_areas関数を指定します。引数には選択された都道府県のvalueの値を渡します。この関数内では、valueの値に応じたprefecture要素の子要素であるarea要素のリストを取得し、このリストでループして地域セレクトボックスのオプションを生成、追加していきます。

トップ > 小技集 > （DHTML関連）都道府県・地域選択連動セレクトボックス～ JavaScript編～

トップ | このサイトについて | 管理者へメール | サイトマップ