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上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
js中this的用法实例分析
Jan 10 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
javascript实现简易数码时钟
Mar 30 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 MySQL与分页效率
2008/06/04 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
全面了解python中的类,对象,方法,属性
2016/09/11 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python批量爬取下载抖音视频
2019/06/17 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python脚本后台执行方式
2019/12/21 Python
Python 实现数组相减示例
2019/12/27 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
法律六进活动方案
2014/03/13 职场文书
货车司机岗位职责
2014/03/18 职场文书
银行求职自荐信
2014/06/30 职场文书
志愿者工作心得体会
2016/01/15 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python