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获取地址栏参数
Dec 22 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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/10/09 PHP
php实现encode64编码类实例
2015/03/24 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python中的yield使用方法
2014/02/11 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
初中物理教学反思
2014/01/14 职场文书
公司捐款倡议书
2014/05/14 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
python基础之爬虫入门
2021/05/10 Python
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL