ajax动态级联

function ajaxRequest(){
 var parent = document.getElementById('province');
 var province = parent.options[parent.selectedIndex].value;
 var options = {
  url:'ajax/'+province+'.xml',
  listener:callback,
  method:'GET',
  failListener:failCallback
 }
 var request = createRequest(options);
 request.send(null);
}
function removeChildren(parent) {
    while (parent.firstChild) {
         parent.removeChild(parent.firstChild);
    }
    return parent;
}
function createRequest(options){
 var req = false;
 if(window.XMLHttpRequest) {
  var req = new window.XMLHttpRequest();
 } else if (window.ActiveXObject) {
  var req = new window.ActiveXObject('Microsoft.XMLHTTP');
 }
 if(!req) return false;
 req.onreadystatechange = function(){
  if (req.readyState ==4 && req.status == 200){
   options.listener.call(req);
  }else if(req.readyState ==4 && req.status == 404){
   options.failListener.call(req)
  }
 };
 req.open(options.method,options.url,true);
 return req;
}
function callback(){
 var xmlDoc = this.responseXML;
 var root = xmlDoc.getElementsByTagName('root')[0];
 var cities = root.getElementsByTagName("city");
 //构建label
 var label1 = document.createElement('LABEL');
 label1.setAttribute('for', 'city');
  var txt1 = document.createTextNode('城市：');
  label1.appendChild(txt1);
 //开始构建城市的select
 var citySelect = document.createElement('SELECT');
  citySelect.setAttribute('id', 'city');
  citySelect.setAttribute('name', 'city');
 //添加城市select的options。
 var cuurentCity = null;
 var cityOptions = [];
 var txt = [];
 for(var i = 0; i < cities.length; i++) {
  cuurentCity = cities[i].childNodes[0].nodeValue;
   cityOptions[i] = document.createElement('OPTION');
   cityOptions[i].setAttribute('value', cuurentCity);
   txt[i] = document.createTextNode(cuurentCity);
   cityOptions[i].appendChild(txt[i]);
  citySelect.appendChild(cityOptions[i]);
 }
 var test = document.getElementById('test');
 removeChildren(test);
 test.appendChild(label1);
 test.appendChild(citySelect);
}
function failCallback(){
 var test = document.getElementById('test');
 test.innerHTML = '直辖市！';
}
function addEventSimple(obj,evt,fn){
 if(obj.addEventListener){
  obj.addEventListener(evt,fn,false);
 }else if(obj.attachEvent){
  obj.attachEvent('on'+evt,fn);
 }
}
addEventSimple(window,'load',function(){
var p1 = document.createElement('P');
 var label1 = document.createElement('LABEL');
 label1.setAttribute('for', 'province');
 p1.appendChild(label1);
  var txt1 = document.createTextNode('省/直辖市：');
  label1.appendChild(txt1);
 var select1 = document.createElement('SELECT');
 select1.οnchange= function(){ajaxRequest()}
 select1.setAttribute('id', 'province');
 select1.setAttribute('name', 'province');
 p1.appendChild(select1);
  var option1 = document.createElement('OPTION');
  option1.setAttribute('value', 'beijing');
  select1.appendChild(option1);
   var txt2 = document.createTextNode('北京');
   option1.appendChild(txt2);
  var option2 = document.createElement('OPTION');
  option2.setAttribute('value', 'liaoning');
  select1.appendChild(option2);
   var txt3 = document.createTextNode('辽宁');
   option2.appendChild(txt3);
  var option3 = document.createElement('OPTION');
  option3.setAttribute('value', 'shanxi');
  select1.appendChild(option3);
   var txt4 = document.createTextNode('山西');
   option3.appendChild(txt4);
var test = document.getElementById('test');
test.parentNode.insertBefore(p1,test);
});

 

======================

ajax/liaoling.xml

<root>

  < city > 沈阳 </ city >

  < city > 大连 </ city >

  < city > 本溪 </ city >

  < city > 阜新 </ city >

  < city > 葫芦岛 </ city >

  < city > 盘锦 </ city >

  < city > 铁岭 </ city >

  < city > 丹东 </ city >

  < city > 锦州 </ city >

  < city > 营口 </ city >

  < city > 鞍山 </ city >

  < city > 辽阳 </ city >

  < city > 抚顺 </ city >

  < city > 朝阳 </ city >

  < city > 瓦房店 </ city >

  </ root >

http://www.earthol.com/city.html