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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
vue中$nextTick的用法讲解
Jan 17 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
初识PHP中的Swoole
2016/04/05 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
js实现分页功能
2017/05/24 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
Js图片点击切换轮播实现代码
2020/07/27 Javascript
python ddt数据驱动最简实例代码
2019/02/22 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
python如何将图片转换素描画
2020/09/08 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
人事部专员岗位职责
2014/03/04 职场文书
奉献家乡演讲稿
2014/09/16 职场文书