ajax动态级联

最新推荐文章于 2024-09-18 23:27:31 发布

a274915611

最新推荐文章于 2024-09-18 23:27:31 发布

阅读量1.5k

点赞数

文章标签： ajax function callback null url

本文链接：https://blog.csdn.net/a274915611/article/details/3261047

版权

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);
});