selectで都道府県が選択されると、別のselectに市区町村一覧を表示するサンプルです。
HTML
都道府県のプルダウン"pref"と市区町村のプルダウン"city"を用意。"pref"のほうには都道府県を書いておきます。
"city"のほうは空で。
<div data-role="fieldcontain"> <label for="pref">都道府県</label> <select name="pref" id="pref"> <option value="">選択してください</option> <option value="01">北海道</option> <option value="02">青森県</option> ・・・ </select> </div> <div data-role="fieldcontain"> <label for="city">市区町村</label> <select name="city" id="city"> <option value="">選択してください</option> </select> </div>
JavaScript
都道府県プルダウンの値が変わったとき、ajaxで市区町村一覧を読み込みます。それを市区町村プルダウンにセット。
$('#city').selectmenu('refresh');は、jQuery Mobileでのおまじないです。
$('#pref').change(function() { $.get('citylist.php?pref_code='+$(this).val(), function(data) { $('#city').html(data); }); $('#city').val(''); $('#city').selectmenu('refresh'); });
PHP
m_cityテーブルには、pref_code, city_code, city_nameという項目があります。都道府県コードが渡されたらpref_codeで絞込み、市区町村一覧を返します。
<option value="01101">札幌市中央区</option>
<option value="01102">札幌市北区</option>
という一覧を返すので、そのまま"city"のプルダウンに入れます。
<?php $pref_code = mysql_real_escape_string($_GET["pref_code"]); $sql = "SELECT * FROM m_city "; $sql .= " WHERE pref_code = '" . $pref_code . "'"; $sql .= " ORDER BY city_code"; $rec = mysql_query($sql, $g_db); $ret = '<option value="">選択してください</option>' . "\r\n"; if($data = mysql_fetch_array($rec)){ do{ $ret .= '<option value="' . $data["city_code"] . '">' . $data["city_name"] . '</option>' . "\r\n"; }while($data = mysql_fetch_array($rec)); } mysql_free_result($rec); echo $ret; ?>
こんにちわ
このプログラムの実際に動作したスクリーンショットまたは、
デモをアップしていただけないでしょうか。
JqueryMobileでなかなかhierselectを公開した記事がないので
とても興味があります。
Uka
かなり前に作ったものですが、jQueryMobileだとこんな感じでした。
http://wc.m47.jp/s/
コードがシンプルでとても参考になりました。
ありがとうございました。
Uka