「.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側でイベントハンドラを設定することができます。
