js+xml生成级联下拉框代码


Posted in Javascript onJuly 24, 2012

需要默认选中时,定义一个变量 var cityId=城市id
下面是js代码

function readxml() { 
var XmlDoc = null; 
if (window.ActiveXObject) { 
XmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
XmlDoc.async = false; 
XmlDoc.load(path + "/web/common/regions.xml"); 
browse = "ie"; 
} else if (document.implementation 
&& document.implementation.createDocument) { 
xmlDoc = document.implementation.createDocument('', '', null); 
xmlDoc.load("regions.xml"); 
browse = "ff"; 
} else { 
alert('未做与该浏览器的兼容!'); 
} 
var root = XmlDoc.documentElement; 
// 获取根节点下面的省节点 
var provinces = root.childNodes; 
var province = document.getElementByIdx_x_x("province"); 
var cities = document.getElementByIdx_x_x("regId"); 
for ( var i = 0; i < provinces.length; i++) { 
// 获取省节点的name属性的值 
var name = provinces[i].getAttribute("name"); 
// 创建一个option 
var opt = document_createElement_x_x("option"); 
// 为option添加文本 
opt.a(document_createTextNode(name)); 
// 添加到父节点中 
if(cityId!=null&&cityId!=""){ 
var citys=provinces[i].childNodes; 
for(var j=0;j<citys.length;j++){ 
if(citys[j].getAttribute("id")==cityId){ 
opt.selected="selected"; 
for ( var j = 0; j < citys.length; j++) { 
// 创建一个option 
var opt1 = document_createElement_x_x("option"); 
opt1.value = citys[j].getAttribute("id"); 
// 为option添加文本 
opt1.a(document_createTextNode(citys[j] 
.getAttribute("name"))); 
// 添加到父节点中 
if(citys[j].getAttribute("id")==cityId){ 
opt1.selected="selected"; 
} 
cities.a(opt1); 
} 
} 
} 
} 
province.a(opt); 
} 
province.onchange = function() { 
var pce = document.getElementByIdx_x_x("province"); 
var opts = pce.options; 
var opt1 = opts[pce.selectedIndex]; 
var name = opt1.innerText; 
for ( var i = 0; i < provinces.length; i++) { 
// 获取省节点的name属性的值 
var name1 = provinces[i].getAttribute("name"); 
if (name == name1) { 
cities.length = 1;// 每次改变的时候清空 
var pros = provinces[i]; 
var citys = pros.childNodes; 
for ( var j = 0; j < citys.length; j++) { 
// 创建一个option 
var opt1 = document_createElement_x_x("option"); 
opt1.value = citys[j].getAttribute("id"); 
// 为option添加文本 
opt1.a(document_createTextNode(citys[j] 
.getAttribute("name"))); 
// 添加到父节点中 
cities.a(opt1); 
} 
} 
} 
} 
}

下面是xml结构
<?xml version="1.0" encoding="utf-8"?> 
<regions> 
<province name="湖北"> 
<city id="1" name="武汉" isOpen="1" /> 
<city id="2" name="黄冈" isOpen="1" /> 
<city id="19" name="襄樊" isOpen="1" /> 
<city id="22" name="鄂州" isOpen="0" /> 
<city id="24" name="黄石" isOpen="1" /> 
</province> 
<province name="重庆"> 
<city id="23" name="重庆" isOpen="0" /> 
</province> 
</regions>
Javascript 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
UI Events 用户界面事件
Jun 27 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 #Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 #Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 #Javascript
基于jquery自定义图片热区效果
Jul 21 #Javascript
Js四则运算函数代码
Jul 21 #Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 #Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 #Javascript
You might like
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
小学门卫岗位职责
2013/12/17 职场文书
季度思想汇报
2014/01/01 职场文书
给面试官的感谢信
2014/02/01 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
反腐倡廉标语
2014/06/24 职场文书
现实表现证明材料
2015/06/19 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python