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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 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
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
vue实现购物车列表
2020/06/30 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
警察群众路线整改措施
2014/09/26 职场文书
国情备忘录观后感
2015/06/04 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android