都道府県が選択されたとき、市区町村一覧を表示する(プルダウンの連動)

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;
?>

  • Spread The Love
  • Digg This Post
  • Tweet This Post
  • Stumble This Post
  • Submit This Post To Delicious
  • Submit This Post To Reddit
  • Submit This Post To Mixx

3 Responses to “都道府県が選択されたとき、市区町村一覧を表示する(プルダウンの連動)”

  1. 匿名 says:

    こんにちわ
     このプログラムの実際に動作したスクリーンショットまたは、
     デモをアップしていただけないでしょうか。
     JqueryMobileでなかなかhierselectを公開した記事がないので
     とても興味があります。
                          Uka

  2. Admin says:

    かなり前に作ったものですが、jQueryMobileだとこんな感じでした。
    http://wc.m47.jp/s/

  3. 匿名 says:

    コードがシンプルでとても参考になりました。
    ありがとうございました。
    Uka

Leave a Reply