スポンサード リンク

Ajax sample010で使用したプログラムの解説。

今回は sample010 で使用した Ajax のプログラムについて、詳しく解説します。 DOM(ドム:Document Object Model) を使っている部分を重点的に説明します。

「.innerHTML」を使った時と「DOM」を使った時で、どのように変わるのか考えながら読んでみてください。


■index.html側
HTMLには div 要素に id 名を付けているだけで、中身は空です。

<div id="result"></div>


■pref.js側

(1)select要素を作成している部分です。
var sel = document.createElement('select');

イメージ
<select></select>

*新しい要素を作成するには、createElementメソッドを使います。


(2)select要素に id 名を付けている部分です。
sel.setAttribute('id', 'selectPref');

イメージ
<select id="selectPref"></select>


(3)1行目の option 要素を作成している部分です。
var opt = document.createElement('option');

<option></option>


(4)option 要素に値をセットしている部分です。
opt.setAttribute('value', 0);

<option value="0"></option>


(5)option 要素内に項目をセットしている部分です。
var text = document.createTextNode('選択してください。');
opt.appendChild(text);

<option value="0">選択してください。</option>

*要素内に文字列を使う場合は、createTextNode で「テキストノード」を作成する必要があります。文字列を直接使うことはできないので注意してください。

*要素を親要素に追加するには、appendChildメソッドを使います。


(6)select要素に option 要素を追加している部分です。
sel.appendChild(opt);

<select id="selectPref">
  <option value="0">選択してください。</option>
</select>


(7)2行目以降の option 要素は、for文の中で作成します。レコード件数分だけ繰り返されます。

for(i = 0; i < item.length; i++){
  省略
}


(8)2行目の option 要素を作成している部分です。
var opt = document.createElement('option');

<option></option>


(9)option 要素に値をセットしている部分です。
opt.setAttribute('value', prefCdValue);

<option value="1"></option>


(10)option 要素内に項目をセットしている部分です。
var text = document.createTextNode(prefNameValue);
opt.appendChild(text);

<option value="1">北海道</option>


(11)select要素に option 要素を追加している部分です。
sel.appendChild(opt);

<select id="selectPref">
  <option value="0">選択してください。</option>
  <option value="1">北海道</option>
</select>


(12)もう一度for文が繰り返されると、以下のようになります。

<select id="selectPref">
  <option value="0">選択してください。</option>
  <option value="1">北海道</option>
  <option value="2">青森県</option>
</select>

これがどんどん繰り返されます。


(13)select要素を div 要素(result)に追加している部分です。
result.appendChild(sel);

<div id="result">
  <select id="selectPref">
    <option value="0">選択してください。</option>
    <option value="1">北海道</option>
    <option value="2">青森県</option>
  </select>
</div>

*ここではじめて画面に表示されます。


(14)select要素にイベントハンドラを設定している部分です。
$('selectPref').onchange = function (){prefChange(this);}

*thisは選択リストボックス自身です。

*select要素を作成した後でないと、イベントハンドラを設定できないため、この位置に書いています。


(15)イベントハンドラを設定したので、都道府県を切り替えた時には、関数 prefChange() が呼び出されます。

function prefChange(obj) {
  省略
}

*引数の obj は選択リストボックス自身を参照しています。


(16)選択リストボックスで、選択したオプションの値(value)を数値にして、変数に代入している部分です。
var prefCd = Number(obj.value);

*この値は市町村を絞り込む時の抽出条件に使うことができます。


(17)if文で選択リストボックスの値が、0の時(1行目)とそれ以外の時で、処理を分けています。

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

*選択リストボックスで、選択したオプションの項目(テキスト)は、以下のように取得できます。
obj.options[obj.selectedIndex].text;


今回のように DOM を使った方法では、要素の種類(select、option、li、a、img など)や目的によって、使うメソッドがいろいろありますので、慣れが必要です。

HTMLタグを直接代入できる「.innerHTML」の簡単さがわかったのではないでしょうか。


【ワンポイント】

index.html側で、select要素と1行目のオプションまでは書いておいて、プログラムでは2行目の option 要素から作成する方法もあります。もちろん1行目は書かなくて、空の select要素だけでもかまいません。

<select id="selectPref">
  <option value='0' selected>選択してください。</option>
</select>

動的に作成したフォーム部品が、どうしても上手く動作しないときには、あらかじめ親要素だけは書いておくと有効です。

その場合、最初から要素が存在するので、index.js側でイベントハンドラを設定することができます。


スポンサード リンク






Ajax初心者入門講座TOPへ