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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 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和ACCESS写聊天室(三)
2006/10/09 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
Angular2 父子组件数据通信实例
2017/06/22 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
js实现车辆管理系统
2020/08/26 Javascript
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
python中的协程深入理解
2019/06/10 Python
python随机生成库faker库api实例详解
2019/11/28 Python
浅谈Python中的模块
2020/06/10 Python
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
计算机应届毕业生自荐信范文
2014/02/23 职场文书
师范生自我鉴定
2014/03/20 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
财务工作个人总结
2015/02/27 职场文书
远程教育培训心得体会
2016/01/09 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang