兼容性好的省市三级级联菜单

最新推荐文章于 2015-10-14 02:30:00 发布

shadowkiss

最新推荐文章于 2015-10-14 02:30:00 发布

阅读量2k

点赞数

分类专栏：编程技术文章标签： null javascript xml action 服务器文档

本文链接：https://blog.csdn.net/shadowkiss/article/details/3136402

版权

编程技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

最近又教js代码把以前的省市级联改的完美了一些

本代码的特点:
1 兼容性好 (IE FF)
2 不使用服务器端技术
3 地区数据与显示逻辑相分离(xml数据)
4 数据标准，齐全(国土资源部数据)

文件如下 address.html

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Address</title>
</head>
<script type="text/javascript" language="javascript" src="address.js"></script>
<body>

<form id="form1" name="form1" method="post" action="">
        省:<select name="province"><option value="">请选择...</option></select>
        市:<select name="city"><option value="">请选择...</option></select>
        区:<select name="county"><option value="">请选择...</option></select>
</form>

</body>
</html>
 

address.js

 
 // JavaScript Document
// 加载xml文档




//runxml
window.onload = init;


//xmlDocument
var xmlDoc = null;

//province element
var p;
//city element
var c;


function init(){
    p = document.getElementById('form1').province;
    c = document.getElementById('form1').city;
    ct = document.getElementById('form1').county;
    p.onchange = getCity;
    c.onchange = getCounty;
    initProvince();
    
}





function loadXML(xmlFile){
    var xmlDoc;
    if(window.ActiveXObject){//for ie
        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
    }
    else if (document.implementation&&document.implementation.createDocument){//for moz
        xmlDoc = document.implementation.createDocument('', '', null);
    }
    else{
        alert('xml read ERROR!');
        return null;
    }
    xmlDoc.async = false;
    xmlDoc.preserveWhiteSpace = false;
    xmlDoc.load(xmlFile);
    return xmlDoc;
}



function initProvince(){
    if(xmlDoc == null){
        xmlDoc = loadXML('GBT2260-1999.xml');   
    }
    
    var provinces = xmlDoc.getElementsByTagName("province");
    
    //alert(provinces.length);
    
    
    while(p.options.length > 1){
        p.removeChild(p.options.item(1));   
    }

    for(var i = 0; i<provinces.length; i++){
        var oOption = document.createElement("option");
        //oOption.innerHTML = provinces[i].getAttribute('name');
        oOption.appendChild(document.createTextNode(provinces[i].getAttribute('name')));
        oOption.value = provinces[i].getAttribute('code');
        p.appendChild(oOption); 
    }
}



function getCity(){

    while(c.options.length > 1){
        c.removeChild(c.options.item(1));   
    }
    
    while(ct.options.length > 1){
        ct.removeChild(ct.options.item(1)); 
    }
    
    var name = p.options[p.selectedIndex].value;
    
    //ie work! but moz fail!
    //var pro = xmlDoc.selectSingleNode("//province[@name='"+name+"']");//xpath
    
    
    //ugly method but can work!
    var pro = null;
    var provinces = xmlDoc.getElementsByTagName("province");
    for(var k = 0; k < provinces.length; k++){
        if(provinces[k].getAttribute('code') == name){
            pro = provinces[k];
            break;
        }
    }
    
    if(pro!=null){
        var citys = pro.getElementsByTagName("city");
        if(citys != null){
            for(var i = 0; i<citys.length; i++){
                var oOption = document.createElement("option");
                //oOption.innerHTML = citys[i].getAttribute('name');
                oOption.appendChild(document.createTextNode(citys[i].getAttribute('name')));
                oOption.value = citys[i].getAttribute('code');
                c.appendChild(oOption); 
            }
        }
    }
}


function getCounty(){
    while(ct.options.length > 1){
        ct.removeChild(ct.options.item(1)); 
    }
    var name = c.options[c.selectedIndex].value;
    
    //ie work! but moz fail!
    //var pro = xmlDoc.selectSingleNode("//province[@name='"+name+"']");//xpath
    
    
    //ugly method but can work!
    var pro = null;
    var citys = xmlDoc.getElementsByTagName("city");
    for(var k = 0; k < citys.length; k++){
        if(citys[k].getAttribute('code') == name){
            pro = citys[k];
            break;
        }
    }
    
    if(pro!=null){
        var countys = pro.getElementsByTagName("county");
        if(countys != null){
            for(var i = 0; i<countys.length; i++){
                var oOption = document.createElement("option");
                //oOption.innerHTML = citys[i].getAttribute('name');
                oOption.appendChild(document.createTextNode(countys[i].getAttribute('name')));
                oOption.value = countys[i].getAttribute('code');
                ct.appendChild(oOption);    
            }
        }
    }
    
}

 

GBT2260-1999.xml 标准数据太多，请到空间下载完整代码

如下为运行效果

请到空间下载完整代码

shadowkiss

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
兼容性好的省市三级级联菜单

最近又教js代码把以前的省市级联改的完美了一些本代码的特点:1 兼容性好 (IE FF)2 不使用服务器端技术3 地区数据与显示逻辑相分离(xml数据)4 数据标准，齐全(国土资源部数据) 文件如下 address.htmlhtml xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="t
复制链接

扫一扫

专栏目录