スポンサード リンク

Ajax 都道府県から市町村を絞り込んで表示する方法。

今回は都道府県を選択すると、該当する市町村の一覧が表示できる Ajax プログラムについて説明します。

全国に都道府県は 47 しかありませんが、市町村は 1900 を超えます。レコードを全件表示していては大変です。

そこで「URLにパラメータを渡すと、該当する市町村のリストをXMLで返す」というWebサービスを私が作りました。

http://ws.bzen.net/pgtop/GetCity.php?prefCd=1

ajax-332.gif

prefCd=1 の数字を 1〜47 の範囲で変更すると、XMLのデータが変わります。

このWebサービスを Ajax のプログラムから利用することで、都道府県を切り替えるごとに市町村が変わるフォーム部品が作れます。

*上記のWebサービスは、サーバーに付加がかかるため、この講座の学習目的でのみ利用できます。その他の目的での利用は禁止します。

今回はプログラムが長いので、プログラミング、動作確認、プログラムの解説、というステップに分けて解説します。まずはプログラミングから行ないましょう。


【1】sample010 フォルダをコピーして sample011 フォルダを作成します。

ajax-328.gif


【2】今回は最終的に以下のようなファイルの構成になります。

ajax-329.gif

・city.js と city.php は新たに作成します。
・pref.php と city.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
・変更点があるのは index.html、index.js、pref.js、index.css です。
・pref.php に変更はありませんので省略します。

*「\」はWindowsでは円記号のことです。

保存先 C:\phpdev\www\ajax\sample011
ファイル名 index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../lib/prototype.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="pref.js"></script>
    <script type="text/javascript" src="city.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>pref・city</title>
  </head>
  <body>
    <div id="state"></div>
    <div id="result"></div>
    <div id="result2"></div>
  </body>
</html>


保存先 C:\phpdev\www\ajax\sample011
ファイル名 index.js

onload = init;
var state;
var result;
var result2;

function init() {
  state = $('state');
  result = $('result');
  result2 = $('result2');
  prefDisp();
}


保存先 C:\phpdev\www\ajax\sample011
ファイル名 pref.js

function prefDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "pref.php";
  var paramList = "";

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');
    var item = response[0].getElementsByTagName('Item');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectPref');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    for(i = 0; i < item.length; i++){
      var prefCd = item[i].getElementsByTagName('PREF_CD');
      var prefCdValue = prefCd[0].firstChild.nodeValue;

      var prefName = item[i].getElementsByTagName('PREF_NAME');
      var prefNameValue = prefName[0].firstChild.nodeValue;

      var opt = document.createElement('option');
      opt.setAttribute('value', prefCdValue);
      var text = document.createTextNode(prefNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult要素に追加
    result.appendChild(sel);
    //イベントハンドラの設定
    $('selectPref').onchange = function (){prefChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}

function prefChange(obj) {
  var prefCd = Number(obj.value);

  if (prefCd == 0) {
    state.innerHTML = "都道府県が選択されていません。<br />\n";
  } else {
    var prefName = obj.options[obj.selectedIndex].text;
    state.innerHTML = prefCd + ":" + prefName + " を選択しました。<br />\n";
    //市町村をクリア
    clearCity();
    //市町村を表示
    cityDisp(prefCd);
  }

}


保存先 C:\phpdev\www\ajax\sample011
ファイル名 city.js

function cityDisp(prefCd) {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "city.php";
  var paramList = "prefCd=" + prefCd;

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');
    var item = response[0].getElementsByTagName('Item');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectCity');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    for(i = 0; i < item.length; i++){
      var cityCd = item[i].getElementsByTagName('CITY_CD');
      var cityCdValue = cityCd[0].firstChild.nodeValue;

      var cityName = item[i].getElementsByTagName('CITY_NAME');
      var cityNameValue = cityName[0].firstChild.nodeValue;

      var opt = document.createElement('option');
      opt.setAttribute('value', cityCdValue);
      var text = document.createTextNode(cityNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult2要素に追加
    result2.appendChild(sel);
    //イベントハンドラの設定
    $('selectCity').onchange = function (){cityChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}

function cityChange(obj) {
  var cityCd = Number(obj.value);

  if (cityCd == 0) {
    state.innerHTML = "市町村が選択されていません。<br />\n";
  } else {
    var cityName = obj.options[obj.selectedIndex].text;
    state.innerHTML = cityCd + ":" + cityName + " を選択しました。<br />\n";
  }

}

function clearCity() {
  //result2の子要素を取得
  var sel = result2.childNodes;

  //既に子要素がある場合は削除
  if (sel.length >= 1) {
    result2.removeChild(sel[0]);
  }

}


保存先 C:\phpdev\www\ajax\sample011
ファイル名 index.css

#state {
  font-size:16px;
  color:#0000cc;
  margin-top:10px;
  margin-bottom:10px;
}

#result {
  float:left;
  margin-right:10px;
  font-size:14px;
  color:#000000;
}

#result2 {
  font-size:14px;
  color:#000000;
}


保存先 C:\phpdev\www\ajax\sample011
ファイル名 city.php

<?php
  if (isset($_GET["prefCd"])){
    header("Content-type: application/xml");
    $prefCd = $_GET["prefCd"];
    $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;
    readfile($url);
  }else{
    header("Content-type: text/html");
    print "パラメータに prefCd を含めてください。";
  }
?>


pref.php を含めると、必要なファイルは全部で 7つ です。

変更点のある index.html、index.js、pref.js、index.css については、それほど大きな変更ではありません。また新たに作成した city.js と city.php も、 pref.js と pref.php を少し改良しただけです。

ファイル数が増え、プログラムも長くなったように感じるかもしれませんが、中身は今までとほとんど同じで、新しいことは少しだけです。

これまでのステップを順番に学んできた方は、詳しい説明がなくても、大体意味がつかめる力が身に付いていると思います。

プログラムの動作確認は次回に行ないます。


スポンサード リンク






Ajax初心者入門講座TOPへ