用javascript简单实现省市区级联菜单 -

冯瑞芳

浏览: 27331 次
性别:
来自: 河南

最近访客更多访客>>

fcr1209973

heands

陈多0621

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (27)

社区版块

存档分类

用javascript简单实现省市区级联菜单

JavaScript XML 浏览器 Opera Myeclipse

1、先列举出名为city.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、把city.xml放在WebRoot下，然后在WebRoot下建一个city.html

具体代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>city.html</title>

</head>

<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>

</html>

//用javaScript实现

<script type="text/javascript">

//获取xmlDoc对象

function getXmlDoc() {

var xmlDoc;

try {

//用IE浏览器加载xml

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

} catch (err) {

try {

//用其它的浏览器加载xml

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"));

//添加到省中

sheng.appendChild(shengopt);

}

}

//当省节点发生改变时触发事件

sheng.onchange = function() {

//获取省节点的所有option对象的集合

var shengs = sheng.options

//获取选项中option对象的selectedIndex；

var num = shengs.selectedIndex;

//清空市县

shi.length = 0;

xian.length = 0;

// 获取xml文件中的postcode对象的值

var ppostcode = shengs[num].getAttribute("value");

//遍历所有的市

for ( var i = 0; i < provinces.length; i++) {

//查看该元素节点是否是元素节点

if (provinces[i].nodeType == 1) {

var postcode = provinces[i].getAttribute("postcode");

                    //判断从页面中得到的postcode与从xml中得到的postcode是否相等

if (postcode == ppostcode) {

//通过省得到市的所有的节点

var cities = provinces[i].childNodes;

//清空市的节点

shi.length = 0;

for ( var i = 0; i < cities.length; i++) {

//判断是否是元素节点

if (cities[i].nodeType == 1) {

var shiopt = document.createElement("option");

shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));

//设置市的属性

shiopt.setAttribute("value", cities[i].getAttribute("postcode"));

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) {

var postcode = cities[j].getAttribute("postcode");

if (postcode == spostcode) {

xian.length = 0;

var areas = cities[j].childNodes;

for ( var k = 0; k < areas.length; k++) {

if (areas[k].nodeType == 1) {

var        xianopt=document.createElement("option");

xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));

xianopt.setAttribute("value", areas[k].getAttribute("postcode"));

xian.appendChild(xianopt);

}

}

break;

}

}

}

}

}

}

}

//-->

</script>

注意事项：

1、使用opera11.01版本会出现bug

在这里对于opera11.01版本中进行采用本地访问时即输入的地址是：

file://D:/Workspaces/MyEclipse 8.6/20110322/WebRoot/city1.html,会出现如下bug(但对于opera11版本以下的就不存在此问题):

XMLHttpRequest to files is disabled for security reasons.

Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.

解决方案是：

1、打开opera浏览器,在地址栏中输入:about:cofig

2、在列举的首选项编辑器中找到: User Prefs

3、点击打开User Prefs 找到里边的:Allow File XMLHttpRequest并勾选

4、勾选上之后点击下面的保存按钮即可解决此bug;

备注：但如果采用的是http://localhost:8080/20110322/city1.html也没有此bug.

2、处理空白和换行的方式

   Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。那么怎么解决这种差异呢？

    for(var i=0;i<provinces.length;i++){

        /*解决方案:在输出所有的子节点的时候在这里判断该节点是否是元素节点

         *如果是元素节点就继续操作,否则直接进入下一个循环即可解决。

         */

        if(provinces[i].nodeType==1){

          }

}

分享到：

浅谈Jquery

2011-03-22 19:22
浏览 2004
评论(0)
分类:企业架构
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用javascript简单实现省市区级联菜单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用javascript简单实现省市区级联菜单

评论

发表评论

相关推荐

最近访客更多访客>>