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 的函数
<script type="text/javascript" src="tel.js"></script>
剩余的就是在HTML页面中添加我们的Js代码,以实现选择前一个后,自动改变后一个
<script type="text/javascript">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; }</script>最后我们需要的就是创建一个XML文件,实现从里面读取数据。 附XML代码:
<?xml version="1.0" encoding="utf-8" ?> <中国><北京><北京市><海淀/><上地/><广西><南宁><宁明/><我家/>