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

所属分类: 网络编程 / JavaScript 阅读数: 1424
收藏 0 赞 0 分享
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如何判断查询日期是否为有效日期,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多