city.xml 文件
<?xml version="1.0" encoding="UTF-8"?>
<cities>
<province name="北京">
<city>大兴</city>
<city>昌平</city>
<city>朝阳</city>
<city>海淀</city>
<city>东城</city>
<city>西城</city>
</province>
<province name="河北">
<city>石家庄</city>
<city>保定</city>
<city>邢台</city>
<city>张家口</city>
<city>廊坊</city>
<city>承德</city>
</province>
<province name="河南">
<city>郑州</city>
<city>安阳</city>
<city>平顶山</city>
<city>开封</city>
<city>商丘</city>
<city>洛阳</city>
</province>
</cities>
select.html 文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body><br>
<span>
<select id="province">
<option>
请选择省
</option>
</select></span>
<span>
<select id="cities">
<option>
请选择相应省下面的市
</option>
</select>
</span>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
var xmlDom;
try{
//针对的是IE浏览器 创建一个空的微软 XML 文档对象
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("","",null);
}catch(er){
}
}
//关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.async = "false";
//解析器加载名为 "xxx.xml" 的 XML 文档、
xmlDom.load("city.xml");
//获得根节点
var root = xmlDom.documentElement;
//获得省节点
var provinces = root.childNodes;
//获得第一个下拉框对象
var province = document.getElementById("province");
//把XML省节点的值添加到省下拉列表中
for(var i=0;i<provinces.length;i++) {
//获得省节点的属性为name的属性值
var name = provinces[i].getAttribute("name");
//创建一个option
var opt = document.createElement("option");
//创建省下拉列表中OPTION的值为得到的属性值的值
opt.appendChild(document.createTextNode(name));
//添加到下拉列表中
province.appendChild(opt);
}
//得到第二个下拉对象
var cities = document.getElementById("cities");
province.onchange = function() {
//获得第一个下拉框对象
var pce = document.getElementById("province");
//获取下拉框对象的所有OPTION
var opts = pce.options;
//获取被选中的下拉对象
var opt1 = opts[pce.selectedIndex];
//获取被选中的下拉文本对象的值(OPTION中间的文本)
var name = opt1.text; //opt1.innerHTML
for(var i=0;i<provinces.length;i++) {
//获取省节点的name属性值
var name1 = provinces[i].getAttribute("name");
//判断如果选中文本本的值,等于<province>属性值就把这个属性值的city值添加到第二个下拉列表中
if(name = name1) {
//清空下拉列表的值
cities.length = 1;
//得到当前选中的<province>对象
var pros = provinces[i];
//得到当前选中的<province>的子节点
var citys = pros.childNodes;
for (var j=0;j<citys.length;j++) {
//创建option对象
var opt1 = document.createElement("option");
opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
//把创建的option对象添加到第二个下拉列表中
cities.appendChild(opt1);
}
}
}
}
}
为啥这个程序只能兼容IE?给找找原因吧!
分享到:
相关推荐
jquery解析xml并实现省市二级联动
js解析xml实现二级,三级联动简单成功实例源代码及相关文档 ,对于想实现二,三级联动(省县市)效果的朋友们,这是一个很好的参考,源代码都有,直接导入工程,即可运行,查看效果
JavaScript+xml实现下拉二级联动菜单 JavaScript+xml实现下拉二级联动菜单
Js解析xml实现省市县三级联动简单成功示例
省市县三级联动源码,解析xml实现,有非常详细的注释,直接打开HTML就可以看到效果
使用Ajax解析xml实现省市县三级联动
js+xml省市县三级联动实现【完成重构】 js+xml省市县三级联动实现【完成重构】
jQuery解析xml文件,实现省市县三级联动下拉框
省市区热点四级联动javascript+xml省市区热点四级联动javascript+xml省市区热点四级联动
JQuery 省市县三级联动 ,解析中国城市XML,实现联动。需在本地有服务
2.js解析xml实现省 市 县三级联动。 3.通过百度地图,点击省 市 县 带出相应地图。 4.实现定位当前城市。 5.实现查询带出地图 6.百度地图密钥,需要自己注册,非商用,如若商用,责任自负。
ajax + xml 省市县区四级联动
JS+XML 省市区三级联动完美版 划分到: 北京市->市辖区->东城区,西城区,崇文区,宣武区,朝阳区,丰台区,石景山区,海淀区,门头沟区,房山区,通州区,顺义区,昌平区,大兴区,怀柔区,平谷区 北京市->县->密云县,延庆县
安卓开发xml解析,省市县三级联动Spinner下拉列表源码(含注释)
JS+XML 省市区 三级联动下拉框 可以学到很多东西的 (*^__^*) 嘻嘻……
基于xml数据的省市区三级联动, 以xml作为数据存储区
jquery结合ajax和xml实现省市县三级联动,chaojixuan
JS_XML省市县三级联动 经典中的经典
JavaScript解析XML实现多级级联下拉列表,但好多朋友说假的.我不知道是真假,因为没有测试过.只是从别的地方拷过来共享的.请下载的时候小心,不过资源分是0分
使用javaScript 结合jquery 解析xml文件实现省市三级联动