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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
JS实现简单打字测试
Jun 24 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
jquery的ajax简单结构示例代码
2014/02/17 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
对python中的pop函数和append函数详解
2018/05/04 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Django celery异步任务实现代码示例
2020/11/26 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
百年校庆节目主持词
2014/03/27 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
开学典礼致辞
2015/07/29 职场文书
2016特色励志班级口号
2015/12/24 职场文书
离婚协议书格式范本
2016/03/18 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server