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

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

    

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


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

ソース解読のためのヒント
ポイント1 : ページ読み込み時に都道府県データを読み込む
   bodyタグのonloadイベントにJavaScriptのselect_prefectures関数を指定します。この関数内では、読み込んだxmlファイルからprefecture要素のリストを取得し、このリストでループして都道府県セレクトボックスのオプションを生成、追加していきます。
ポイント2 : 都道府県選択時に地域データを読み込む
   都道府県セレクトボックスのonchangeイベントにJavaScriptのselect_areas関数を指定します。引数には選択された都道府県のvalueの値を渡します。この関数内では、valueの値に応じたprefecture要素の子要素であるarea要素のリストを取得し、このリストでループして地域セレクトボックスのオプションを生成、追加していきます。


Yahoo!ブックマークに登録 Googleブックマークに登録 はてなブックマークに登録 livedoorブックマークに登録 deliciousブックマークに登録 Buzzurlブックマークに登録


トップ | このサイトについて | 管理者へメール | サイトマップ
Google www una.soragoto.net  
Copyright(c) 2009 - 2012 una All Rights Reserved.