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 相关文章推荐
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
vue实现全选、反选功能
Nov 17 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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验证手机号码
2015/11/11 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
php面向对象重点知识分享
2019/09/27 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
Python多线程编程(一):threading模块综述
2015/04/05 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
python使用epoll实现服务端的方法
2018/10/16 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python 内置函数汇总详解
2019/09/16 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
python中with用法讲解
2020/02/07 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
实习生自我评价
2014/01/18 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
灵魂歌王观后感
2015/06/17 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
Python 用户输入和while循环的操作
2021/05/23 Python
比较几种Redis集群方案
2021/06/21 Redis
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android