JQueryで都道府県選択用ドロップダウン
JQueryMobileを使って、地域選択＆都道府県選択を実験をしてみたので、その覚書です。
基本的にJQueryであろうとJQueryMobileであろうとやることは変わりません。つまり、
「地方の選択をするイベント処理内で、都道府県のリストを再構築する。」
です。<span>などでWrapする方法もあるようですが、JQueryMobileでうまく動かなかったので、今回は再構築する方法にしました。
■HTML
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>検索条件</h3>
</div>
<div class="ui-body ui-body-a">
<select name="areaselector">
<option value="00">全国</option>
<option value="01">北海道・東北地区</option>
<option value="02">関東地区</option>
<option value="03">中部・北陸地区</option>
<option value="04">関西地区</option>
<option value="05">中国地区</option>
<option value="06">四国地区</option>
<option value="07">九州・沖縄地区</option>
</select>
<select name="preselector">
</select>
</div>
</div>
// 地域と都道府県の一覧 var areaPreList = { "00":{ "01":"北海道", "02":"青森県", "03":"岩手県", "04":"宮城県", "05":"秋田県", "06":"山形県", "07":"福島県", "08":"茨木県", "09":"栃木県", "10":"群馬県", "11":"埼玉県", "12":"千葉県", "13":"東京都", "14":"神奈川県", "15":"新潟県", "16":"富山県", "17":"石川県", "18":"福井県", "19":"山梨県", "20":"長野県", "21":"岐阜県", "22":"静岡県", "23":"愛知県", "24":"三重県", "25":"滋賀県", "26":"京都府", "27":"大阪府", "28":"兵庫県", "29":"奈良県", "30":"和歌山県", "31":"鳥取県", "32":"島根県", "33":"岡山県", "34":"広島県", "35":"山口県", "36":"徳島県", "37":"香川県", "38":"愛媛県", "39":"高知県", "40":"福岡県", "41":"佐賀県", "42":"長崎県", "43":"熊本県", "44":"大分県", "45":"宮崎県", "46":"鹿児島県", "47":"沖縄県"}, "01":{ "01":"北海道", "02":"青森県", "03":"岩手県", "04":"宮城県", "05":"秋田県", "06":"山形県", "07":"福島県"}, "02":{ "08":"茨木県", "09":"栃木県", "10":"群馬県", "11":"埼玉県", "12":"千葉県", "13":"東京都", "14":"神奈川県"}, "03":{ "15":"新潟県", "16":"富山県", "17":"石川県", "18":"福井県", "19":"山梨県", "20":"長野県", "21":"岐阜県", "22":"静岡県", "23":"愛知県", "24":"三重県"}, "04":{ "25":"滋賀県", "26":"京都府", "27":"大阪府", "28":"兵庫県", "29":"奈良県", "30":"和歌山県"}, "05":{ "31":"鳥取県", "32":"島根県", "33":"岡山県", "34":"広島県", "35":"山口県"}, "06":{ "36":"徳島県", "37":"香川県", "38":"愛媛県", "39":"高知県"}, "07":{ "40":"福岡県", "41":"佐賀県", "42":"長崎県", "43":"熊本県", "44":"大分県", "45":"宮崎県", "46":"鹿児島県", "47":"沖縄県"}, }; /** * 初期処理 */ $(document).ready(function(){ // 都道府県プルダウン生成 createPreDownLlst("00"); // プルダウンの初期選択 $("select[name='areaselector']").val("00"); $("select[name='areaselector']").selectmenu('refresh',true); $("select[name='preselector']").val("00"); $("select[name='preselector']").selectmenu('refresh',true); }); /** * 都道府県のセレクターの制御 */ $("select[name='areaselector']").on('change',function(event){ var areano = $(this).val(); // ドロップダウンリストを作成 createPreDownLlst(areano); // 生成したリストの選択とリフレッシュ（JQueryMobile) $("select[name='preselector']").val("00"); $("select[name='preselector']").selectmenu('refresh',true); }); /** * 都道府県のリストを作成して、リストに追加する。 */ function createPreDownLlst(areano) { var preList = areaPreList[areano]; var optItem = "<option value='00'>選択してください</option>"; // 表示順制御のため、ソート var keylist=new Array; for(key in preList) keylist.push(key); keylist.sort(); // リスト作成 for(key in keylist){ optItem += "<option value='"+ keylist[key] + "'>"+ preList[keylist[key]] + "</option>" } $("select[name='preselector'] option").remove(); $("select[name='preselector']").append(optItem); }
よくよく見ると簡単ですね。今回はJQueryMobileを使っているので、selectmenuメソッドをつかって、プルダウンをリフレッシュしています。
通常のJQuryなら、必要ないと思われます。
実用ベースだと、都道府県リストはJavaScript側の共通場所においておくか、あるいはサーバ側（例えば、phpなど）から取得してくるほうが安全でしょうね。
前に、システムのコードとフロントの値が異なっていてひどい目にあったことがあります。（コード一覧は提出してたんですが、デザイン屋が全くみてなくて、適用に並べたらしいですが、すでに検収済みということで、うちのシステムのデバッグ中に問題になりうちが修正することに）
ひどいものでしたので、気を付けましょう＞＜；
