トップページ >  Ajax >  コンボボックスを連携するには
初版2010/05/07: 最終更新日2010/05/07
コンボボックスを連携するには
目次
コンボボックスを連携するには
コンボボックスを連携するサンプル
コンボボックスを連携するには
都道府県と市区町村の連携をjqueryを使用して実現します。
都道府県を選択すると、該当都道府県下の市区町村をコンボボックスに生成しようと思います。 市区町村情報を取得する際に、jsonを用いたデータ連携をします。
コンボボックスを連携するサンプル
■index.html
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('#SearchWordFormPref').change(
      function(){
        $.ajaxSetup({scriptCharset:'utf-8'}); 
        $('#SearchWordFormCity').empty();
        var select = document.getElementById("SearchWordFormCity");
        var i = 0;
        select.options[i++] = new Option("すべて表示", "");

        var prefId = $(this).val();
        if (prefId == "") {
          return;
        }

        $.getJSON(
          //第一引数:JSONのURL
          'city.php',

          //第二引数:RESTパラメータ
          {
            'p' : prefId
          },

          //第三引数:コールバック関数
          function(json) {
            var select = document.getElementById("SearchWordFormCity");
            var i = 0;
            select.options[i++] = new Option("すべて表示", "");
            for (key in json) {
             select.options[i++] = new Option(json[key].City, json[key].City);
            }
          }
        );
      }
    );
  });
</script>

<img src="img/pref.gif" alt="都道府県" />
<select name="data[SearchWordForm][pref]" id="SearchWordFormPref">
<option value="">すべて表示</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
</select>
<img src="img/city.gif" alt="市区町村" />
<select name="data[SearchWordForm][city]" id="SearchWordFormCity">
<option value="">すべて表示</option>
</select>
</pre>

■city.php
<?php
  $pref     = $_GET["p"];

  // 
  $host     = '';
  $user     = '';
  $pass     = '';
  $name     = '';

  $conn       = mysql_connect( $host, $user, $pass );
  if ( !$conn )
  {
    die( '接続できませんでした: ' . mysql_error() );
  }
  mysql_select_db( $name, $conn );

  // 
  $sql      = " SELECT"
          . "     pref_id"
          . "    ,pref"
          . "    ,city_id"
          . "    ,city"
          . " FROM"
          . "     cities"
          . " WHERE"
          . "     pref = '" . $pref . "'"
          . " ORDER BY"
          . "     city_id";
  $result     = mysql_query( $sql );

  $profile_list = array();
  $profile_data = array();

  if ( mysql_num_rows($result) == 0 ) 
  {
      $profile_data = array(
         "PrefId"     => '-'
        ,"Pref"       => '-'
        ,"CityId"     => '-'
        ,"City"       => '-'
      );
      array_push($profile_list, $profile_data);
  }
  else
  {
    while ( $data = mysql_fetch_assoc($result) )
    {
      $profile_data = array(
         "PrefId"     => $data['pref_id']
        ,"Pref"       => $data['pref']
        ,"CityId"     => $data['city_id']
        ,"City"       => $data['city']
      );
      array_push($profile_list, $profile_data);
    }
  }

  $profile_json = json_encode( $profile_list );

  header('Content-type: application/json; charset=UTF-8');
  echo $profile_json;

?>