連動型選択ボックス
連動する２つの選択ボックスのサンプル。
左側のメインメニューを選択すると、それと対応する項目が左のサブメニューに表示されます。
(手順)
(1)起動時にXMLHttpRequestにより都道府県データの入ったXMLファイルを読み込み、左側のメインメニューに都道府県名をセット。
(2)メインメニューにはonchangeイベントハンドラを使用し、選択項目が変更された時に再度XMLファイルを読み込み、該当する市町村名をサブメニューに設定し直す。
<![CDATA[
// 起動時の処理
window.onload = init;
function init(){
// リクエストURL
var url = 'data/Prefecture.xml';
// リクエスト
new Ajax.Request(url,
{
method: 'get',
onComplete: setMenu
});
}
// メインメニューを設定
function setMenu( req ){
// 出力先のトップ要素となるselect要素
var topElem = document.getElementById("menu");
// pref_name要素を取得
var pref = req.responseXML.getElementsByTagName('pref_name');
for(var i=0; i<pref.length; i++) { // 都道府県名 var pref_name = pref[i].firstChild.nodeValue; // option要素を作成 var opElem = document.createElement('option'); // value属性を設定 opElem.setAttribute("value", pref_name); // テキストノードを設定 var text = document.createTextNode(pref_name); opElem.appendChild(text); topElem.appendChild(opElem); } } // メインメニューを選択した場合の処理 function changeList(target){ // リクエストURL var url = 'data/Prefecture.xml'; // リクエスト new Ajax.Request(url, { method: 'get', onComplete: function(req) { setSubmenu(req, target); } }); } // サブメニューを設定 function setSubmenu(req, target){ // 出力先のトップ要素となるselect要素 var topElem = document.getElementById("submenu"); // 最初の要素を除いて<option>要素を削除
var options = topElem.childNodes;
while(options.length>1){
topElem.removeChild(options[options.length-1]);
}
// pref_name要素を取得
var pref = req.responseXML.getElementsByTagName('pref_name');
for(var i=0; i<pref.length; i++) { // pref_name要素の内容が選択ボックスの値と等しい場合 if(pref[i].firstChild.nodeValue == target.value){ // pref_name要素と親が同じそのcity要素を取得 var city = pref[i].parentNode.getElementsByTagName('city'); for(var j=0; j<city.length; j++) { // 市町村名 var city_name = city[j].firstChild.nodeValue; // option要素を作成 var opElem = document.createElement('option'); // value属性を設定 opElem.setAttribute("value", city_name); // テキストノードを設定 var text = document.createTextNode(city_name); opElem.appendChild(text); topElem.appendChild(opElem); } } } } ]]>
<![CDATA[
<form>
<fieldset>
<label for="menu">都道府県：</label>
<select id="menu" onchange="changeList(this);">
<option>選択してください
</option>
</select>
<label for="menu">市町村：</label>
<select id="submenu" name="city">
<option>選択してください</option>
</select>
</fieldset>
<p><input type="submit" value="送信"/></p>
</form>
]]>
XMLファイル
<![CDATA[
＜?xml version="1.0" encoding="utf-8"?>
<prefectures>
<prefecture><pref_name>北海道</pref_name>
<city>札幌</city>
<city>函館</city>
<city>小樽</city>
<city>室蘭</city>
・
・
・
<city>伊達</city>
<city>北広島</city>
<city>石狩</city>
</prefecture>
]]>
