Ajax DOMを使って選択リストボックスを書き換える方法。

前回の最後に少し説明した通り、 Ajax で「.innerHTML」を使って、動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。

そこで今回は DOM(ドム:Document Object Model) を使った方法に書き換えてみます。DOM は慣れるまで少し難しく感じると思いますが、今回はとりあえず動かしてみることに専念してください。


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

ajax-319.gif


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

ajax-320.gif

*「\」は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 を起動します。

ajax-166.gif


【4】Firefox を起動して、動作を確認します。

http://localhost/ajax/sample0010/

ajax-321.gif


【5】どれか都道府県を選択してください。

ajax-322.gif


【6】都道府県が選択され、上にメッセージが表示されました。

ajax-323.gif

*選択したオプションの値と項目が表示できるということは、プログラムの中で値を活用できるということです。(例えば市町村を絞り込む検索条件にしたり)


【7】他の都道府県でも試してください。

ajax-326.gif


【8】今度はわざと一番上の「選択してください。」を選択します。

ajax-324.gif


【9】「都道府県が選択されていません。」というメッセージが表示されました。

ajax-325.gif


【10】同様に Internet Explorer でも動作を確認してください。

ajax-327.gif

選択リストボックスは、前回と同じように動作することが確認できると思います。


【ワンポイント】

今回の sample010 と同じように、都道府県を切り替えた時にメッセージを表示する機能を、「.innerHTML」を使っている sample009 に組み込んだ場合、 Internet Explorer では動くのですが、Firefox では上手く動きませんでした。

やはり DOM を使った方法のほうがよさそうです。


DOM のプログラム部分については次回に詳しく解説します。


スポンサード リンク

スポンサード リンク






Ajax初心者入門講座TOPへ