XmlSelectBox1.js XmlSelectBox1.js XmlSelectBox1.js

gistfile1.js

function xmlselectbox(id,xml_url,key,func){
  var callback_func=func;
  var outarea=document.querySelector(id);
  var xml={};
  var items=[];
  var XHR= new XMLHttpRequest();
  while(outarea.hasChildNodes()){
   outarea.removeChild(outarea.lastChild);
  }

//XMLのロード（エラー処理省略）
  XHR.open("GET",xml_url,false);
  XHR.send(null);
  if(XHR.status == 200) xml=XHR.responseXML;
  //if(xml.hasOwnProperty("SelectionLanguage"))  //IEは使えない
  if(typeof xml.hasOwnProperty === "undefined")  //とりあえず
   xml.setProperty("SelectionLanguage","XPath");  //IEにのみ必用

//最初のSELECTBOX生成

  items=getitem("/descendant::node()/child::"+key,xml);

  var first_contener=document.createElement("div");
  var first_selectbox=document.createElement("select");
  first_selectbox.setAttribute("name",key);
  first_selectbox.add(new Option(key+"を選択してください","default"),null);
  for(var i=0;i<items.length;i++){
   first_selectbox.add(new Option(items[i].firstChild.nodeValue,items[i].firstChild.nodeValue),null);
  }

 //イベント追加
  first_selectbox.onchange=select_change(first_selectbox,xml,outarea);

  first_contener.appendChild(document.createTextNode(key+":"));
  first_contener.appendChild(first_selectbox);
  outarea.appendChild(first_contener);
  first_selectbox.selectedIndex=0;

//SELECTBOXをどんどん作成
 function select_change(selectbox,xml,outarea){
  return function(){ 
   var items=[];

   items=getitem("/descendant-or-self::node()/child::" + selectbox.name
                 + "[contains(self::node()/text(),'" 
                 + selectbox.value + "')]/child::*",xml);
   if(items.length>0){
    if(selectbox.parentNode.nextSibling){
     if(selectbox.parentNode.nextSibling.lastChild.getAttribute("name")==items[0].nodeName)
      outarea.removeChild(selectbox.parentNode.nextSibling);
     }    
    var next_contener=document.createElement("div");
    var next_selectbox=document.createElement("select");
    next_selectbox.setAttribute("name",items[0].nodeName);
    next_selectbox.add(new Option(items[0].nodeName+"を選択してください","default"),null);
    for(var i=0;i<items.length;i++){
     next_selectbox.add(new Option(items[i].firstChild.nodeValue,items[i].firstChild.nodeValue),null);
    }

 //イベント追加
    next_selectbox.onchange=select_change(next_selectbox,xml,outarea);

    next_contener.appendChild(document.createTextNode(items[0].nodeName+":"));
    next_contener.appendChild(next_selectbox);
    if(selectbox.parentNode.nextSibling){
     outarea.insertBefore(next_contener,selectbox.parentNode.nextSibling);
    }else{
     outarea.appendChild(next_contener);
    }
    next_selectbox.selectedIndex=0;
   }else{
    if(typeof callback_func != "undefined")
     callback_func(selectbox.getAttribute("name"),selectbox.value);
   }
 }
}

//XPATHで検索
 function getitem(xpath,xml){
  var nodeValues=[];
  var NodeList,Nodelength;
  try{
   NodeList = xml.evaluate(xpath,xml,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
  }catch(e){
   NodeList = xml.selectNodes(xpath);
  }
  Nodelength=NodeList.snapshotLength||NodeList.length;
  for(var i=0;i<Nodelength;i++){
   nodeValues[i]=(typeof(NodeList.snapshotItem)==='undefined')?NodeList.item(i):NodeList.snapshotItem(i);
   //console.log(nodeValues[i]);
  }
  return nodeValues;
 }

}

Demo & Description (Japanese)
http://yoneyone.my-sv.net/XmlSelectBox.htm