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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
Openlayers实现距离面积测量
Sep 28 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 前一天或后一天的日期
2008/06/28 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
node中的session的具体使用
2018/09/14 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python3中for循环踩过的坑记录
2020/12/14 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
小学家长会邀请函
2014/01/23 职场文书
青安岗事迹材料
2014/05/14 职场文书
资料员岗位职责
2015/02/10 职场文书
简单的辞职信模板
2015/05/12 职场文书
感恩教育主题班会
2015/08/12 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2019年最新借条范本!
2019/07/08 职场文书
PHP解决高并发问题
2021/04/01 PHP
python实现简单倒计时功能
2021/04/21 Python