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 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
webpack打包js的方法
Mar 12 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
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
Sony CFR 320 修复改造
2020/03/14 无线电
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
Python 除法小技巧
2008/09/06 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python tornado修改log输出方式
2019/11/18 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
如何解决python多种版本冲突问题
2020/10/13 Python
Python实现简单猜数字游戏
2021/02/03 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
国贸专业的职业规划书
2014/03/15 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python