JavaScript XML实现两级级联下拉列表


Posted in Javascript onNovember 10, 2008

1.创建测试XML文件:select.xml

<?xml version="1.0" encoding="GBK"?> 
<select> 
<province id="sx"> 
陕西 
<city id="xa">西安</city> 
<city id="bj">宝鸡</city> 
<city id="ak">安康</city> 
</province> 
<province id="js"> 
江苏 
<city id="nj">南京</city> 
<city id="xz">徐州</city> 
</province> 
<province id="sh"> 
上海 
</province> 
</select>

2.创建HTML页面:select.html
<body> 
</body> 
<script>... 
/**//** 
* @description 二级级联下拉 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.xml; 
SelectLevel.prototype.provinces; 
SelectLevel.prototype.parentName="province";//父节点名称 
SelectLevel.prototype.childName="city";//子节点名称 
SelectLevel.prototype.keyName="id";//属性 
/**//** 
* 对象SelectLevel的构造器 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
function SelectLevel(parentName,childName,keyName)...{ 
if(parentName!=null && parentName!="")...{ 
this.parentName=parentName; 
} 
if(childName!=null && childName!="")...{ 
this.childName=childName; 
} 
if(keyName!=null && keyName!="")...{ 
this.keyName=keyName; 
} 
} 
/**//** 
* 加载xml文件 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.readXML=function(url)...{ 
var selectXML; 
//如果它受支持,采用标准的2级DOM技术 
if(document.implementation && document.implementation.createDocument)...{ 
//创建新的Document对象 
selectXML=document.implementation.createDocument("","",null); 
//设置装载完毕时触发事件 
selectXML.onload=function()...{ 
alert("加载完成"); 
} 
selectXML.load(url); 
}else...{//IE浏览器创建Document对象 
selectXML=new ActiveXObject("Microsoft.XMLDOM"); 
//设置onload 
selectXML.onreadystatechange=function()...{ 
if(selectXML.readyState==4)...{ 
alert("加载完成"); 
} 
} 
selectXML.load(url); 
} 
this.xml=selectXML; 
} 
/**//** 
* 遍历xml 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.iteratorXML=function(node,level)...{ 
var n=node; 
if(n==null)...{ 
n=this.xml.documentElement; 
} 
if(level==null)...{ 
level=0; 
} 
if(n.nodeType==3)...{ 
for(var i=0;i<level;i++)...{ 
document.write("-"); 
} 
document.write(n.data.trim()+"<br>"); 
}else...{ 
for(var m=n.firstChild;m!=null;m=m.nextSibling)...{ 
this.iteratorXML(m,level+1); 
} 
} 
} 
/**//** 
* 下拉联动 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.changeSelect=function()...{ 
var city=document.getElementById(this.childName); 
var province=document.getElementById(this.parentName); 
city.options.length=0; 
if(province.value==null || province.value=="")...{ 
city.options.length=1; 
city.options[0].text="请选择…"; 
return; 
} 
var citys=this.provinces[this[province.value]].getElementsByTagName(this.childName); 
if(citys.length==0)...{ 
city.options.length=city.options.length+1; 
city.options[city.options.length-1].value=province.value; 
for(var i=0;i<province.options.length;i++)...{ 
if(province.options[i].selected)...{ 
city.options[city.options.length-1].text=province.options[i].text; 
return; 
} 
} 
return; 
} 
city.options.length=citys.length; 
for(var i=0;i<citys.length;i++)...{ 
city.options[i].value=citys[i].getAttribute(this.keyName); 
city.options[i].text=citys[i].firstChild.data.trim(); 
} 
} 
/**//** 
* 初始化下拉列表 
* @author BluesLee 
* @lastModif BluesLee 
* @createDate 2007-10-13 
* @modifDate 2007-10-15 
* @version 1.0 
*/ 
SelectLevel.prototype.init=function(parent,province,city)...{ 
this.provinces=this.xml.getElementsByTagName(this.parentName); 
var selectProvince=document.createElement("select"); 
var selectCity=document.createElement("select"); 
var obj=this; 
selectProvince.setAttribute("name",this.parentName); 
selectProvince.setAttribute("id",this.parentName); 
selectProvince.attachEvent("onchange",function()...{obj.changeSelect();}); 
selectProvince.options.length=this.provinces.length+1; 
selectProvince.options[0].text="请选择…"; 
selectCity.setAttribute("name",this.childName); 
selectCity.setAttribute("id",this.childName); 
selectCity.options.length=1; 
selectCity.options[0].text="请选择…"; 
for(var i=0;i<this.provinces.length;i++)...{ 
SelectLevel.prototype[this.provinces[i].getAttribute(this.keyName)]=i; 
selectProvince.options[i+1].value=this.provinces[i].getAttribute(this.keyName); 
selectProvince.options[i+1].text=this.provinces[i].firstChild.data.trim(); 
if(this.provinces[i].getAttribute(this.keyName)==province)...{ 
selectProvince.options[i+1].selected=true; 
var citys=this.provinces[i].getElementsByTagName(this.childName); 
selectCity.options.length=citys.length+1; 
for(var j=0;j<citys.length;j++)...{ 
selectCity.options[j+1].value=citys[j].getAttribute(this.keyName); 
selectCity.options[j+1].text=citys[j].firstChild.data.trim(); 
if(citys[j].getAttribute(this.keyName)==city)...{ 
selectCity.options[j+1].selected=true; 
} 
} 
} 
} 
parent.appendChild(selectProvince); 
parent.appendChild(selectCity); 
} 
String.prototype.trim=function()...{ 
return this.replace(/^s*/g,"").replace(/s*$/g,""); 
} 
//测试 
var newXML=new SelectLevel(); 
newXML.readXML("select.xml"); 
//newXML.iteratorXML(null,-2); 
newXML.init(document.body,"sx","bj"); 
</script>

Javascript 相关文章推荐
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
如何提高数据访问速度
Dec 26 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
详解Layer弹出层样式
Aug 21 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 #Javascript
js 目录列举函数
Nov 06 #Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 #Javascript
ext读取两种结构的xml的代码
Nov 05 #Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 #Javascript
js form action动态修改方法
Nov 04 #Javascript
JS 继承实例分析
Nov 04 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
python更改已存在excel文件的方法
2018/05/03 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
通过Pandas读取大文件的实例
2018/06/07 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python如何获取apk的packagename和activity
2020/01/10 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
《圆明园的毁灭》教学反思
2014/02/28 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
社团招新宣传语
2015/07/13 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书