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 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python如何判断数独是否合法
2016/09/08 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
关于Python的一些学习总结
2018/05/25 Python
python里 super类的工作原理详解
2019/06/19 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
python绘制趋势图的示例
2020/09/17 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
就业自荐书
2013/12/05 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
全国文明单位申报材料
2014/05/31 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
校运会班级霸气口号
2015/12/24 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
tomcat下部署jenkins的方法
2022/05/06 Servers