省市区三级级联（mark）
来源：互联网 发布：c语言中的函数格式 编辑：程序博客网 时间：2024/05/18 02:21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb18030" /><title>三级级联训练</title><script type="text/javascript">//IE创建 xml dom的方法 function createIeXmlDom(){ var arr=['MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.5.0','MSXML2.DOMDocument.4.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument','Microsoft.XMLDOM']; for(var i=0;i<arr.length;i++){ try{ //通过MSXML的版本创建DOM return new ActiveXObject(arr[i]); }catch(ex){ return null; } } throw new Error('MSXML组件还没有安装'); }//end function judge(){ var xmlDom; if(window.ActiveXObject){ //ie下 xmlDom=createIeXmlDom(); }else if(document.implementation&&document.implementation.createDocument){ //支持W3C的浏览器 xmlDom=document.implementation.createDocument('','',null); //第一个指定文档的命名空间 根表签名 doc类xing }else{ throw new Error('您的浏览器不支持'); } return xmlDom;}window.onload=function(){//创建XMLDOMvar xmldom=judge();//同步执行方式xmldom.async=false;//载入xml文档xmldom.load('city.xml');//获取对应的标签var showsheng=document.getElementById('sheng');var showshi=document.getElementById('shi');var showxian=document.getElementById('xian');//可返回文档的根节点。var root=xmldom.documentElement;//获取根节点下的所有的节点var sheng=root.childNodes;//变量所有的省份，并添加到showshengfor(var i=0;i<sheng.length;i++){addOption(sheng[i],showsheng);}var city;showsheng.onchange=function(){//获取被选择省份的index下标var index=showsheng.options.selectedIndex; showshi.length=1;//清空原来的市区showxian.length=1;//清空原来的县var flag;if(window.ActiveXObject){//ie下city=sheng[index-1].childNodes;//获取选中的省份下面的所有子节点for(var i=0;i<city.length;i++){addOption(city[i],showshi);}}else{//w3c下var sname=showsheng.value;var proname;var citiesfor(i=0;i<sheng.length;i++){ if(sheng[i].nodeType==1){//是元素节点时 proname=sheng[i].getAttribute('name');; if(sname==proname){ cities=sheng[i].childNodes; for(var j=0;j<cities.length;j++){ if(cities[j].nodeType==1){ addOption(cities[j],showshi); } } }}}}}var xian;showshi.onchange=function(){var index=showshi.options.selectedIndex;showxian.length=1;//清空原来的县var flag;if(window.ActiveXObject){xian=city[index-1].childNodes;//获取选中的省份下面的所有子节点for(var i=0;i<xian.length;i++){addOption(xian[i],showxian);}}else{var cname=showshi.value;var xians;var cityname;var cities;for(i=0;i<sheng.length;i++){ if(sheng[i].nodeType==1){ cities=sheng[i].childNodes; for(var j=0;j<cities.length;j++){ if(cities[j].nodeType==1){ cityname=cities[j].getAttribute('name'); if(cityname==cname){ xians=cities[j].childNodes; for(var k=0;k<xians.length;k++){ if(xians[k].nodeType==1){ addOption(xians[k],showxian); } } } } } }}}}}function addOption(arrs,obj){ if(arrs.nodeType==1){//创建元素节点var opt=document.createElement('option');//创建文本节点opt.appendChild(document.createTextNode(arrs.getAttribute('name')));opt.setAttribute('value',arrs.getAttribute('name'));//把option附加上去obj.appendChild(opt);}}</script></head><body><div> <select id="sheng" style="width:160px"><option value="0">请选择省份</option></select>省份<br /> <select id="shi" style="width:160px"><option value="0">请选择市区</option></select>市区<br /> <select id="xian" style="width:160px"><option value="0">请选择县</option></select>县<br /> </div></body></html>
