選択リストボックスは Web サイトでよく使われています。選択リストボックスを使うと、一覧から入力できるようになります。
しかもデータベースに連動して動的に変化させる方法を覚えておくと、用途がとても広がります。
【1】sample005 フォルダをコピーして sample009 フォルダを作成します。
【2】今回は最終的に以下のようなファイルの構成になります。プログラムを一部変更します。
＊index.css に変更はありません。
＊「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\ajax\sample009
ファイル名 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>
<link href="index.css" rel="stylesheet" type="text/css">
<title>pref</title>
</head>
<body>
<div id="state"></div>
<div id="result"></div>
</body>
</html>
保存先 C:\phpdev\www\ajax\sample009
ファイル名 index.js
onload = init;
var state;
var result;
function init() {
state = $('state');
result = $('result');
prefDisp();
}
function clearDisp() {
state.innerHTML = "";
result.innerHTML = "";
}
保存先 C:\phpdev\www\ajax\sample009
ファイル名 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');
var tmpHtml="";
tmpHtml += "<form><select name='selectPref'>";
tmpHtml += "<option value='0' selected>選択してください。</option>";
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;
tmpHtml +="<option value='" + prefCdValue + "'>" + prefNameValue + "</option>\n";
}
tmpHtml += "</select></form>";
result.innerHTML = tmpHtml;
state.innerHTML = "データを取得しました。<br />\n";
}
function showErrMsg(){
clearDisp();
state.innerHTML = "データを取得できませんでした。<br />\n";
}
}
保存先 C:\phpdev\www\ajax\sample009
ファイル名 pref.php
<?php
header("Content-type: application/xml");
$url = "http://ws.bzen.net/pgtop/GetPref.php";
readfile($url);
?>
保存先 C:\phpdev\www\ajax\sample009
ファイル名 index.css
#state {
font-size:16px;
color:#0000cc;
margin-top:10px;
margin-bottom:10px;
}
#result {
font-size:14px;
color:#000000;
}
準備ができたら、Webサーバーを起動して動作を確認してみましょう。
【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。
【4】Firefox を起動して、動作を確認してみましょう。
http://localhost/ajax/sample009/
＊ページを読み込んだ直後にプログラムが動きます。
【5】「選択リストボックス」をクリックします。
【6】都道府県のリストが表示されるので、好きなものを選択してください。
【7】都道府県が選択できました。
【8】同様に Internet Explorer でも動作を確認してください。
【解説】
(1)元になる XML のデータは Web 上のデータベースにあります。
まずデータベースのレコードを GetPref.php で XML 形式に加工して出力しています。
http://ws.bzen.net/pgtop/GetPref.php
それを中継プログラムの pref.php で同一ドメイン内にします。そして Ajax の非同期通信で取り込み、JavaScript のプログラムで選択リストボックスを組み立てる仕組みです。
データベース → GetPref.php(XML出力) → pref.php(中継) → 選択リストボックス組み立て → 画面に表示
この方法のメリットは、データベースのデータが変われば、自動的に選択リストボックスの値にも反映されることです。
＊GetPref.php は pref.php の中で呼び出しています。
＊サーバーに負荷がかかるため、 GetPref.php は学習目的でのみお使いください。
(2)選択リストボックスの用途について
例えば選択リストボックスをチェンジした時に、イベントハンドラを設定すれば、都道府県を切り替えた瞬間に、該当する市町村だけを表示するような応用ができます。
↓このような使い方( Internet Explorer で確認)
全国の特産品検索
またはネットショップの注文画面で、顧客に住所を入力してもらうときに使うことができます。
プログラムの変更点については、次回に詳しく解説します。
