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中获取元素的几种方式小结
Jul 05 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP 柱状图实现代码
2009/12/04 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php和asp语法上的区别总结
2019/05/12 PHP
js跨域请求的5中解决方式
2015/07/02 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python实现简单加密解密机制
2019/03/19 Python
python requests指定出口ip的例子
2019/07/25 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python3 mmh3安装及使用方法
2019/10/09 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
最美乡村教师观后感
2015/06/11 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python