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. Nodejs统计每秒记录日志数

    问题:线上的写日志操作非常频繁,想统计每秒写了多少行数据?假如没法送一个消息写一个日志,问题也就变成了,每秒发送多少消息了. 日志采用log4js书写,格式如下: [-- ::33.548] [INF ...

  2. Vue 不睡觉教程2 - 洋气的文件结构

    目标书接上回,上回那个例子实在太土了.实际开发中我们不可能把整个网站的js和html全写到一个页面上.所以我们这节课的目标在于改造这个例子的文件结构,让它不那么土Let's do it 环境参数vue ...

  3. "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决

    VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...

  4. WC2019退役记

    sb题不会,暴力写不完,被全场吊着打,AFO

  5. depmod -a

    分析可加载模块的依赖性,生成modules.dep文件和映射文件 intelligent bash: ' while true;do grep "reading error" ue ...

  6. Mac 10.12安装SVN工具SmartSVM 7.6

    说明:SVN工具没有最好的,只有用的最顺手的. 下载: (链接: https://pan.baidu.com/s/1dFGqEsT 密码: uyjx)

  7. leetcode简单题目两道(4)

    心情还是有问题,保持每日更新,只能如此了. Problem Given a binary tree, return the level order traversal of its nodes' va ...

  8. python36异步任务 获取ip地址的地理位置

    # encoding: utf-8 import asyncio import requests import functools url = "http://ip.zxinc.org/ap ...

  9. 再说优化MySQL索引

    这几天开发尤其重视数据库索引的优化,是一件好事情,开发特意提过来几个要删除的索引,oh!我的佛陀呀!历史上出现过因为评估不到位,删索引引发故障的案例.那么有什么办法可以评估索引是否合理呢? perco ...

  10. guava文档API制作成chm文件

    将HTML制作成CHM.EXE需要用到一个小工具“HUGECHM”,将HTML打包成CHM文件 1.下载guava的最新的版本,网址:https://github.com/google/guava/w ...