HTML

<select id="s_province" name="s_province"></select>
<select id="s_city" name="s_city" ></select>
<select id="s_county" name="s_county"></select>

<script class="resources library" src="js/area.js" type="text/javascript"></script>
<script type="text/javascript">_init_area();</script>

JS

/*
*   全国三级城市联动 js版
*/
function Dsy(){
    this.Items = {};
}
Dsy.prototype.add = function(id,iArray){
    this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id){
    if(typeof(this.Items[id]) == "undefined") return false;
    return true;
}

function change(v){
    var str="0";
    for(i=0;i<v;i++){
        str+=("_"+(document.getElementById(s[i]).selectedIndex-1));
    };
    var ss=document.getElementById(s[v]);
    with(ss){
        length = 0;
        options[0]=new Option(opt0[v],opt0[v]);
        if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v){
            if(dsy.Exists(str)){
                ar = dsy.Items[str];
                for(i=0;i<ar.length;i++){
                    options[length]=new Option(ar[i],ar[i]);
                }//end for
                if(v){ options[0].selected = true; }
            }
        }//end if v
        if(++v<s.length){change(v);}
    }//End with
}

var dsy = new Dsy();

dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省"]);
dsy.add("0_0_0",["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区"]);
dsy.add("0_0",["北京市"]);
dsy.add("0_1_0",["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区"]);
dsy.add("0_1",["天津市"]);
dsy.add("0_2_0",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区"]);
dsy.add("0_2",["上海市"]);
dsy.add("0_3_0",["渝中区","大渡口区","江北区","沙坪坝区","开县","彭水苗族土家族自治县"]);
dsy.add("0_3",["重庆市"]);
dsy.add("0_4_0",["长安区","桥东区","桥西区","新华区","裕华区","赞皇镇","无极县","无极镇"]);
dsy.add("0_33",["台北","高雄","台中","花莲","基隆","嘉义","金门","连江"]);
dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","云南省","西藏"]);

//此处省略... 完整内容请参见Github的代码:https://github.com/itmyhome2013/national-cities-three-linkage

var s=["s_province","s_city","s_county"];//三个select的name
var opt0 = ["省份","地级市","区县"];//初始值
function _init_area(){  //初始化函数
    for(i=0;i<s.length-1;i++){
      document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
    }
    change(0);
}

在线演示:national-cities-three-linkage

完整源码:click

JS全国城市三级联动的更多相关文章

  1. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  2. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  3. JS案例 - 城市三级联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js 实现全国省市区三级联动

    效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...

  5. 全国省市区三级联动js

    function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; ...

  6. 【原生js】原生js的省市区三级联动

    html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  8. 城市三级联动 AJAX-原生js封装

    话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...

  9. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

随机推荐

  1. String相关练习

    1.用代码演示String类中的以下方法的用法 (1)boolean isEmpty(): 判断字符串是不是空串,如果是空的就返回true (2)char charAt(int index): 返回索 ...

  2. [Re:从零开始的分布式] 0.x——分布式基础概念

    分布式的特点 1. 分布式 2. 对等性 3. 并发性 4. 缺乏全局时钟 5. 故障总是会发生 分布式环境的问题 1. 网络不可靠 2. 网络分区 3. 节点故障 CAP理论 一致性 可用性 分区容 ...

  3. Jenkins 源代码编译

    最近一直想写一个关于 Jenkins 管理的 InelliJ 插件,但是尝试很多次总是在登录认证上面失败,各种办法都不起作用,而且官方的文档含糊不清,就动起了从源代码编译在开发环境中进行调试. 废话少 ...

  4. sql server 2008 R2 配置管理工具打不开

    使用 sql server 配置管理工具是报如下错误: 解决方法:   1 找出 sqlmgmproviderxpsp2up.mof 这个文件的位置   2 以管理员身份运行 mofcomp &quo ...

  5. (转)Heartbeat+DRBD+MySQL高可用方案

    原文:http://www.cnblogs.com/gomysql/p/3674030.html 1.方案简介 本方案采用Heartbeat双机热备软件来保证数据库的高稳定性和连续性,数据的一致性由D ...

  6. leetcode1:线性表

    //定义二维数组int **array = new int*[row_num]; ;i<row_num;i++) { array[i] = new int[col_num]; } vector& ...

  7. Veloce2 Emulator

    High capacity, high-speed, multi-application powerhouse for simulation and emulation of SoC designs ...

  8. python解决处理中文的问题

    脚本开头添加默认编码 python源码中出现了中文字符或要处理中文字符,运行时会出现错误,解决方法是,开头加入字符编码声明: #! /usr/bin/env python # -*- coding:u ...

  9. Orchard源码:缓存设计

    概述 从缓存失效的几种方式开始了解Orchard缓存设计 1.设置失效时间 Func<int> retrieve = () => _cacheManager.Get("te ...

  10. ADO MFC SQL2000

    对于初学VC的朋友来说,连接数据库其实是一件不容易的事情.记得我当时为了与数据库连接上,找了好多资料,上网看了好多文章,都没有解决这个问题.后 来,有个网友帮我解决了,我再次表示感谢.为了后来VC初学 ...