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