DOM を使って要素数を調べて、子要素を削除しているところがポイントです。
■index.html側
(1)新しい JavaScript の外部ファイルを読み込む部分を追加しました。
<script type="text/javascript" src="city.js"></script>
(2)タイトルを変えました。
<title>pref・city</title>
(3)新しい div 要素(result2)を追加しました。
<div id="result2"></div>
■index.js側
(1)変数を追加しました。
var result2;
(2)変数で div 要素(result2)を参照できるようにしている部分です。
result2 = $('result2');
(3)関数 clearDisp() は使わないので、削除しました。
■pref.js側
(1)都道府県の選択リストボックスを切り替えた時に、呼び出される関数 prefChange() の中に、市町村をクリアする関数 clearCity() と、市町村を表示する関数 cityDisp() を加えました。
function prefChange(obj) {
省略
//市町村をクリア
clearCity();
//市町村を表示
cityDisp(prefCd);
}
}
(2)関数 cityDisp() は、取得した値(value)を引数にしているところがポイントです。
cityDisp(prefCd);
＊prefCd は市町村の抽出条件に使われます。
■city.js側
(1)city.js は、ほどんと pref.js と同じです。大きな違いは関数 clearCity() だけです。
function clearCity() {
//result2の子要素を取得
var sel = result2.childNodes;
//既に子要素がある場合は削除
if (sel.length >= 1) {
result2.removeChild(sel[0]);
}
}
(2)div 要素(result2)の子要素を取得している部分です。
var sel = result2.childNodes;
・div 要素(result2)からみると、select要素が子要素になります。
・childNodes の戻り値は配列になります。
(3)子要素がある場合(すでにselect要素がある)は、削除しています。
result2.removeChild(sel[0]);
・1回目は子要素が無いので何もしません。
・selは配列です。子要素は1個しかないので、[0]番目を指定しています。
(配列は0から始まるため)
(4)clearCity()を呼び出さないと、以下のようにselect要素がどんどん増えます。
pref.js でコメントにすると確認できます。
//clearCity();
■pref.php側
pref.phpに変更はありません。
■city.php側
(1) city.phpでは、GETメソッドで値を受け取った場合は、さらに「GetCity.php」を呼び出し、XMLとして出力します。値を受け取らなかった場合は、HTMLとしてメッセージを出力します。
<?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 を含めてください。";
}
?>
(2)if文を使って、GETメソッドで値を受け取ったかどうかで、処理を分岐しています。
if (isset($_GET["prefCd"])){
省略
}else{
省略
}
(3)XMLで出力することをブラウザに送信する処理です。
header("Content-type: application/xml");
(4)受け取った値を変数に代入している部分です。
$prefCd = $_GET["prefCd"];
(5)受け取った値を、さらに外部ドメインのプログラムへのパラメータとして組み立てている部分です。
$url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;
(6)実際に外部のドメインにあるファイルを開いているのは、readfile()関数を使っているこの1行です。
readfile($url);
(7)HTMLで出力することをブラウザに送信する処理です。
header("Content-type: text/html");
■index.css側
(1)div 要素(result2)を追加したので、CSSにも追加しました。
#result2 {
省略
}
(2)選択リストボックスを横に並べるため、要素を回り込ませています。
float:left;
・floatを指定しなかった場合は、下に表示されます。
(3)div 要素の間を広げています。
margin-right:10px;
(4)選択リストボックスで、フォントサイズは効果がないので不要です。
font-size:14px;
これは以前に、ブラウザの画面に div 要素として、直接出力していた時の名残です。削除してかまいません。
