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 页面输出值
Nov 30 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JavaScript 对象模型 执行模型
Oct 15 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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 多维数组排序实现代码
2009/08/05 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP 无限级分类
2017/05/04 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现excel读写数据
2021/03/02 Python
python用插值法绘制平滑曲线
2021/02/19 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
偷看我的初中毕业鉴定
2014/01/29 职场文书
环保建议书
2014/03/12 职场文书
施工质量承诺书范文
2014/05/30 职场文书
师范生求职信
2014/06/14 职场文书
啦啦队口号大全
2014/06/16 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
关于做家务的心得体会
2016/01/23 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
Python OpenCV实现图形检测示例详解
2022/04/08 Python