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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 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
第三节--定义一个类
2006/11/16 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP实现文件下载详解
2014/11/27 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
管理部部长岗位职责
2013/12/05 职场文书
求职自荐信
2013/12/14 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书