1、以下是我简列出xml部分代码
<?xml version="1.0" encoding="UTF-8"?>
<root name="中国">
<province name="请选择省" postcode="100000" >
<city name="请选择市" postcode="100100" >
<area name="请选择区" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
<city name="市辖区" postcode="110100" >
<area name="东城区" postcode="110101" />
<area name="西城区" postcode="110102" />
<area name="崇文区" postcode="110103" />
<area name="宣武区" postcode="110104" />
<area name="朝阳区" postcode="110105" />
<area name="丰台区" postcode="110106" />
<area name="石景山区" postcode="110107" />
<area name="海淀区" postcode="110108" />
<area name="门头沟区" postcode="110109" />
<area name="房山区" postcode="110111" />
<area name="通州区" postcode="110112" />
<area name="顺义区" postcode="110113" />
<area name="昌平区" postcode="110114" />
<area name="大兴区" postcode="110115" />
<area name="怀柔区" postcode="110116" />
<area name="平谷区" postcode="110117" />
</city>
<city name="县" postcode="110200" >
<area name="密云县" postcode="110228" />
<area name="延庆县" postcode="110229" />
</city>
</province>
<province name="天津市" postcode="120000" >
<city name="市辖区" postcode="120100" >
<area name="和平区" postcode="120101" />
<area name="河东区" postcode="120102" />
<area name="河西区" postcode="120103" />
<area name="南开区" postcode="120104" />
<area name="河北区" postcode="120105" />
<area name="红桥区" postcode="120106" />
<area name="塘沽区" postcode="120107" />
<area name="汉沽区" postcode="120108" />
<area name="大港区" postcode="120109" />
<area name="东丽区" postcode="120110" />
<area name="西青区" postcode="120111" />
<area name="津南区" postcode="120112" />
<area name="北辰区" postcode="120113" />
<area name="武清区" postcode="120114" />
<area name="宝坻区" postcode="120115" />
</city>
<city name="县" postcode="120200" >
<area name="宁河县" postcode="120221" />
<area name="静海县" postcode="120223" />
<area name="蓟县" postcode="120225" />
</city>
</province>
//剩余代码省略…….
</root>
2、列举出HTML部分代码
<body>
<div>
<span>
<select id="sheng" style="width: 100px;"></select>
</span>
<span>
<select id="shi" style="width: 100px;"></select>
</span>
<span>
<select id="xian" style="width: 100px;"></select>
</span>
</div>
</body>
3、列举出全部Js中实现代码
<mce:script type="text/javascript"><!--
//获取xmlDoc对象
function getXmlDoc(){
var xmlDoc;
try{
//IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//firefox 其他浏览器
xmlDoc = document.implementation.createDocument("","",null);
}catch(er){
alert("您的浏览器版本太低........");
}
}
//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async=false;
//转载xml文件
xmlDoc.load("city.xml");
return xmlDoc;
}
window.onload = function (){
//通过方法获取对象
var xmlDoc = getXmlDoc();
//获取xml文件的根节点
var root = xmlDoc.documentElement;
//获得所有的省节点
var provinces = root.childNodes;
//获取页面中要显示的省的控件dom对象
var sheng = document.getElementById("sheng");
var shi = document.getElementById("shi");
var xian = document.getElementById("xian");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType ==1 ){
//创建option节点对象
var shengopt = document.createElement("option");
//为省节点添加文本节点
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//为省节点添加属性
shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
//添加省道页面dom对象中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时 触发事件
sheng.onchange = function(){
//获取省节点所有的option对象的集合
var shengs = sheng.options;
//获取选中option对象的selectedIndex(下标值)
var num = shengs.selectedIndex;
//清空市、区
shi.length=0;
xian.length=0;
//根据选中的省获取其value值的内容 即xml文件中的postcode对应的值
var ppostcode = shengs[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType ==1 ){
//获取xml中省节点中postcode的值
var postcode = provinces[i].getAttribute("postcode");
//比较xml中postcode的值是否与所选中的省的value获取其value值的内容相等
if(postcode==ppostcode){
//获取省下的所有的市节点
var cities = provinces[i].childNodes;
//清空市
shi.length=0;
//遍历市节点
for(var i=0;i<cities.length;i++){
//查看该节点是否是元素节点
if(cities[i].nodeType ==1){
//在市节点下创建option节点对象
var shiopt = document.createElement("option");
//添加文本节点
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
//设置属性节点value
shiopt.setAttribute("value",cities[i].getAttribute("postcode"));
//在市节点下添加option节点
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
shi.onchange = function(){
var shis = shi.options;
var num = shis.selectedIndex;
var spostcode = shis[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点
if(provinces[i].nodeType==1){
//获取省下的所有市节点
var cities = provinces[i].childNodes;
//遍历所有市节点
for(var j=0;j<cities.length;j++){
//查看该市节点是否是元素节点
if(cities[j].nodeType==1){
//获取xml中市节点中postcode的值
var postcode = cities[j].getAttribute("postcode");
//比较xml中postcode的值是否与所选中的市的value获取其value值的内容相等
if(postcode == spostcode){
//清空县
xian.length=0;
//获取市下所有县（区）节点
var areas = cities[j].childNodes;
//遍历区（县）节点
for(var k=0;k<areas.length;k++){
//查看该节点中是否是元素节点
if(areas[k].nodeType == 1){
//获取option对象
var xianopt = document.createElement("option");
//添加文本节点
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
//添加属性节点
xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
//将县的option节点添加到县节点中
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
// --></mce:script>
分享到：
相关推荐
省市县三级级联菜单省市县三级级联菜单省市县三级级联菜单
WPF、Prism实现ComboBox省市县三级级联
在使用JSP JavaScript过程中有很多的技巧与实现，那么如何构建二级级联下拉菜单呢，本文将会向你做一个源码上的介绍。
该实例为本人项目中使用的模块代码，经过专业测试人员测试，兼容所有主流浏览器，如有不解之处请联系本人
很有用的javascript四级级联下拉菜单，国家-省级-市级-街道地区，可以扩展为无限级联，样式可以自行设计。
省市县三级级联的xml文件。和读取xml文件的代码。很好用的
网上级联菜单确有不少，单大多是直接写死到jsp页面中的，本代码是用mysql的数据库实现的，希望对大家有帮助！！！
ajax实现省市县三级级联和ajax实现登录判断账号是否被注册
Select2实现全国省市区三级联动下拉菜单
xml实现级联菜单，很简单，完全不需要Ajax，但实现了Ajax的效果
比较全面的js+xml省市县三级级联js控件 ，和大家分享下
ajax实现省市区三级级联demo 数据来自mysql数据库 内附sql脚本
JSP+JavaScript打造二级级联下拉菜单 简单的很哪 嘿嘿
用JSP+JavaScript打造二级级联下拉菜单
实用jQuery省市区三级城市级联下拉菜单选择插件jQuery cxSelect，功能强大非常不错的jQuery插件， 支持省市区三级联动以及全球国家城市的联动，数据采用JSON格式导入，非常方便的，强大的参数 自定义功能，还可以...
JavaScript解析XML实现多级级联下拉列表
select2 下拉搜索 级联 全国省市区的三级联动 谢谢
省市县三级级联sql文件，oracle11g数据库sql文件，
本文件属于文章《使用面向对象的方式封装js级联下拉菜单列表的实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中cascadeMenu.js文件封装了级联菜单插件，可直接引入到html文件中使用。