そこで今回は DOM(ドム:Document Object Model) を使った方法に書き換えてみます。DOM は慣れるまで少し難しく感じると思いますが、今回はとりあえず動かしてみることに専念してください。
【1】sample009 フォルダをコピーして sample010 フォルダを作成します。
【2】今回は最終的に以下のようなファイルの構成になります。
*「\」はWindowsでは円記号のことです。
変更は pref.js だけです。 index.html、index.js、pref.php、index.css に変更はありませんので省略します。
保存先 C:\phpdev\www\ajax\sample010
ファイル名 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";
}
}
準備ができたら、Webサーバーを起動して動作を確認してみましょう。
【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。
【4】Firefox を起動して、動作を確認します。
http://localhost/ajax/sample0010/
【5】どれか都道府県を選択してください。
【6】都道府県が選択され、上にメッセージが表示されました。
*選択したオプションの値と項目が表示できるということは、プログラムの中で値を活用できるということです。(例えば市町村を絞り込む検索条件にしたり)
【7】他の都道府県でも試してください。
【8】今度はわざと一番上の「選択してください。」を選択します。
【9】「都道府県が選択されていません。」というメッセージが表示されました。
【10】同様に Internet Explorer でも動作を確認してください。
選択リストボックスは、前回と同じように動作することが確認できると思います。
【ワンポイント】
今回の sample010 と同じように、都道府県を切り替えた時にメッセージを表示する機能を、「.innerHTML」を使っている sample009 に組み込んだ場合、 Internet Explorer では動くのですが、Firefox では上手く動きませんでした。
やはり DOM を使った方法のほうがよさそうです。
DOM のプログラム部分については次回に詳しく解説します。