JS和Ajax 实现三级联动的下拉选择

1.首先，你需要在HTML 页面里面设置三个下拉菜单 代码如下

省/直辖市
              请选择   
              请选择

然后我们 首先使用Ajax从一个XML 文件中拉取数据，这里使用Ajax的作用也就是如此。

function tel(){
	 var tel = false;
	  if(window.XMLHttpRequest){
		tel = new XMLHttpRequest();
	  }else{
		tel = new window.ActiveXObject('Microsoft.XMLHTTP');
	  }
	 return tel;
     }

在HTML中使用Ajax 的函数

剩余的就是在HTML页面中添加我们的Js代码，以实现选择前一个后，自动改变后一个

var nokia = tel();
    var xmldoc;
    function init(){
        nokia.open('GET','area.xml',true);
        nokia.onreadystatechange = function (){
            if(this.readyState == 4 && this.status == 200){
                xmldoc = this.responseXML;
                var guo = xmldoc.getElementsByTagName('中国')[0];
                var shengList = guo.childNodes;
                var sheng = document.getElementById('slt1');                
                listAppend(shengList,sheng);                
            }            
        }
        nokia.send(null);
    }
    function listAppend(list,_area){
        for(var i=0,len=list.length;i < len;i++){
            var optText = document.createTextNode(list[i].nodeName);
            var opt = cjOpt(optText);                
            _area.appendChild(opt);
        }
    }
    function cjOpt(optText){
        var opt = document.createElement('option');
        opt.appendChild(optText);
        opt.setAttribute('value',optText.nodeValue);
        return opt;
    }
    function xzSheng(){
        xSheng = xz_zx('slt1');
        sheng = xmldoc.getElementsByTagName(xSheng)[0];
        shiList = sheng.childNodes;
        //清理市和县级的列表
        var shi = document.getElementById('slt2');
        clear_zx('slt2');
        clear_zx('slt3');
        listAppend(shiList,shi);
    }
    function xzShi(){
        xshi = xz_zx('slt2');
        shi = xmldoc.getElementsByTagName(xshi)[0];
        xianList = shi.childNodes;
        xian = document.getElementById('slt3');
        //清理县级的列表
        clear_zx('slt3'); 
        listAppend(xianList,xian);
    }
    //清理中心
    function clear_zx(str){
        var list = document.getElementById(str);
        if(list.length>0){
            for(var u=list.length;u>0;u--){
                list.remove(u);
            }
        }  
    }
    //xz_zx
    function xz_zx(str){
        var list = document.getElementById(str);
        var num = list.selectedIndex;
        var _area = list.options[num].value;
        return _area;
    }

最后我们需要的就是创建一个XML文件，实现从里面读取数据。 附XML代码：

<?xml version="1.0" encoding="utf-8" ?> 
        <中国><北京><北京市><海淀/><上地/><广西><南宁><宁明/><我家/>