JS 省市区三级联动：

<!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=utf-8" />

<title>JS 省市区三级联动</title>

</head>

<body>

  <select id="selProvince" name="province">

  </select>

  <select id="selCity" name="city">

  </select>

   <select id="selDist" name="area">

  </select>

  <div></div>

<script type="text/javascript">

var temp;

var P = new Array();

var C = new Array();

var D = new Array();

P = new Array("北京","上海","天津","重庆","广东","四川","浙江","贵州","辽宁","江苏","福建","河北","河南"," 吉林","黑龙江","山东","安徽","广西","海南","内蒙古","山西","宁夏","甘肃","陕西","青海","湖北","湖南"," 江西","云南","新疆","香港","澳门");

/*北京    */ C[] = new Array("北京");

/*上海    */ C[] = new Array("上海");

/*天津    */ C[] = new Array("天津");

/*重庆    */ C[] = new Array("重庆");

/*广东    */ C[] = new Array("广州","深圳","珠海","佛山","惠州","东莞","中山","江门","湛江","汕头");

/*四川    */ C[] = new Array("成都","自贡市","攀枝花","泸州");

/*浙江    */ C[] = new Array("杭州","宁波","嘉兴","绍兴","温州","金华","衢州","舟山","台州","丽水","湖州");

/*贵州    */ C[] = new Array("贵阳");

/*辽宁    */ C[] = new Array("沈阳","大连");

/*江苏    */ C[] = new Array("南京","苏州","南通","无锡","盐城","徐州","常州","连云港","常熟","扬州","镇江","泰州","昆山","吴江");

/*福建    */C[] = new Array("福州","厦门","泉州");

/*河北    */C[] = new Array("石家庄","唐山","邯郸","保定","廊坊","衡水","秦皇岛");

/*河南    */C[] = new Array("郑州","洛阳");

/*吉林    */C[] = new Array("长春","吉林");

/*黑龙江  */C[] = new Array("哈尔滨");

/*山东    */C[] = new Array("济南","青岛","威海","烟台","潍坊","日照","临沂","淄博");

/*安徽    */C[] = new Array("合肥","芜湖","马鞍山");

/*广西    */C[] = new Array("南宁","桂林","北海","柳州");

/*海南    */C[] = new Array("海南","三亚");

/*内蒙古  */C[] = new Array("呼和浩特","包头");

/*山西    */C[] = new Array("太原");

/*宁夏    */C[] = new Array("银川");

/*甘肃    */C[] = new Array("兰州");

/*陕西    */C[] = new Array("西安");

/*青海    */C[] = new Array("西宁");

/*湖北    */C[] = new Array("武汉","宜昌");

/*湖南    */C[] = new Array("长沙","株洲","湘潭");

/*江西    */C[] = new Array("南昌","赣州");

/*云南    */C[] = new Array("昆明");

/*新疆    */C[] = new Array("乌鲁木齐");

/*香港    */C[] = new Array("香港");

/*澳门    */C[] = new Array("澳门");

/*台湾    */C[] = new Array("台北");

for(temp in C)

{

    D[temp] = new Array();

}

/*北京    */D[][] = new Array("海淀区,朝阳区,东城区,西城区,崇文区,宣武区,丰台区,石景山,房山区,门头沟,通州区,顺义区,昌平区,密云区,怀柔区,延庆区,平谷区,大兴区,燕郊区");

/*上海    */D[][] = new Array("黄浦区、卢湾区、徐汇区、徐家汇、长宁区、静安区、普陀区、闸北区 虹口区、杨浦区、宝山区、闵行区、嘉定区、浦东新区、松江区、金山区、青浦区、南汇区、奉贤区、崇明县");

/*天津    */D[][] = new Array("和平,西青,北辰,大港,南开,河东,河西,河北,津南,红桥,塘沽,汉沽,东丽,宝坻,蓟县,武清,宁河,静海,开发区");

/*重庆    */D[][] = new Array("南岸,渝北,万盛,大渡口,万州,北碚,沙坪坝,巴南,双桥,涪陵,江北,九龙坡,渝中");

/*广州    */D[][] = new Array("荔湾,越秀,东山,天河,海珠,黄埔,芳村,白云,花都,番禺,东莞,广州经济技术开发区,从化,增城,萝岗,清远,南沙,佛山");

/*深圳    */D[][] = new Array("福田,罗湖,南山,盐田,宝安,龙岗");

/*珠海    */D[][] = new Array("斗门,横琴,金湾,香洲,坦洲");

/*佛山    */D[][] = new Array("南海,顺德,三水,高明,禅城");

/*惠州    */D[][] = new Array("博罗县,大亚湾区,惠城区,惠东县,惠阳区,龙门县,仲恺区");

/*东莞    */D[][] = new Array("茶山,长安,常平,大朗,大岭山,道?,东城,东坑,凤岗,高?,莞城,洪梅,厚街,黄江,虎门,寮步,麻涌,南城,企石,桥头,清溪,沙 田,石碣,石龙,石排,松山湖,塘厦,万江,望牛墩,谢岗,樟木头,中堂");

/*中山    */D[][] = new Array("东区,南区,西区,石岐区,南头镇,古镇镇,东凤镇,小榄镇,黄圃镇,三角镇,民众镇,阜沙镇,火炬区,港口镇,东升镇,横栏镇,沙溪镇,大涌镇,板芙镇,五桂山镇,南朗镇,三乡镇,神湾镇,坦洲镇");

/*江门    */D[][] = new Array("新会区,蓬江区,江海区,台山市,恩平市,鹤山市,开平市");

/*成都    */D[][] = new Array("青羊,锦江,金牛,武侯,成华,龙泉驿,青白江,高新区,金堂县,新都区,温江区,郫县,双流县,新津县,大邑县,都江堰市,崇州市,邛崃市,蒲江县,彭州市,高新西区,高新西区");

/*杭州    */D[][] = new Array("上城,下城,西湖,拱墅,江干,滨江,余杭,萧山,富阳,桐庐,临安,淳安,建德");

/*宁波    */D[][] = new Array("海曙,江东,江北,鄞州,镇海,北仑,慈溪,余姚,奉化,宁海,象山,高新区,东钱湖旅游度假区");

/*嘉兴    */D[][] = new Array("嘉善,平湖,海盐,海宁,桐乡,秀洲,南湖,市区,经济开发区");

/*绍兴    */D[][] = new Array("绍兴县,诸暨市,上虞市,新昌县,越城区,嵊州市");

/*贵阳    */D[][] = new Array("云岩,南明,金阳新区,小河,花溪,乌当,白云,清镇,开阳,修文,息烽,小河片,金阳");

/*沈阳    */D[][] = new Array("和平,沈河,皇姑,大东,铁西,苏家屯,东陵,新城子,于洪,新民,辽中,康平,法库,浑南新区,沈北新区");

/*大连    */D[][] = new Array("西岗,中山,沙河口,甘井子,旅顺口,金州,开发区,高新园区,长兴岛,普兰店,瓦房店,庄河");

/*南京    */D[][] = new Array("白下,秦淮,玄武,鼓楼,下关,建邺,江宁,六合,浦口,栖霞,雨花,大厂,溧水,高淳");

/*苏州    */D[][] = new Array("园区,新区,平江,沧浪,金阊,虎丘,吴中,昆山,常熟,太仓,张家港,相城,吴江");

/*南通    */D[][] = new Array("城东区,城南区,城北区,城中区,狼山区,天生港,唐闸区,观音山区,开发区,海安县,如皋市,如东县,通州,海门,启东市,海门市,港闸,崇川");

/*无锡    */D[][] = new Array("崇安区,南长区,北塘区,新区,滨湖区,惠山区,马山区,锡山区,江阴市,宜兴市");

/*盐城    */D[][] = new Array("盐城,东台,大丰,盐都,建湖,响水,阜宁,射阳,滨海");

/*徐州    */D[][] = new Array("丰县,鼓楼,贾汪,金山桥开发区,沛县,邳州市,泉山,睢宁市,新城区,云龙,铜山区");

/*常州    */D[][] = new Array("金坛,溧阳,戚区,天宁,武进,新北,钟楼");

/*连云港  */D[][] = new Array();

/*常熟    */D[][] = new Array();

/*扬州    */D[][] = new Array("宝应市,广陵区,高邮市,邗江区,江都市,开发区,维扬区,仪征市");

/*镇江    */D[][] = new Array("丹阳市,句容市,扬中市,丹徒区,京口区,润州区,镇江新区");

/*泰州    */D[][] = new Array("城中区,城东区,城西区,城南区,城北区,高港区,泰兴市,姜堰市,兴化市,靖江市");

/*昆山    */D[][] = new Array("巴城镇,淀山湖镇,花桥镇,锦溪镇,陆家镇,千灯镇,玉山镇,张浦镇,周市镇,周庄镇");

/*福州    */D[][] = new Array("台江,鼓楼,仓山,晋安,马尾,闽侯县,长乐市");

/*厦门    */D[][] = new Array("开元,湖里,思明,鼓浪屿,集美,杏林,海沧,同安,翔安,漳州,龙岩,泉州");

/*泉州    */D[][] = new Array("丰泽区,安溪县,德化县,惠安县,晋江市,鲤城区,洛江区,南安市,泉港区,石狮市,永春县");

/*石家庄  */D[][] = new Array("桥东,桥西,新华,裕华,长安,开发区,正定,平山,鹿泉市,栾城,藁城");

/*唐山    */D[][] = new Array("曹妃甸工业区,丰南,丰润,高新区,古冶,海港开发区,汉沽管理区,开平,乐亭县,卢台开发区,路北,路南,滦南县,滦县,南堡开发区,迁安市,迁西县,唐海县,玉田县,遵化市");

/*邯郸    */D[][] = new Array();

/*保定    */D[][] = new Array();

/*廊坊    */D[][] = new Array("安次,广阳,三河,霸州,香河,永清,固安,文安,大城,大厂");

/*衡水    */D[][] = new Array("桃城区,深州市,冀州市,安平县,故城县,阜城县,景县,枣强县,武强县,饶阳县,开发区,武邑县,郊区");

/*秦皇岛  */D[][] = new Array("北戴河,昌黎县,抚宁县,海港,卢龙县,青龙县,山海关");

/*郑州    */D[][] = new Array("金水,中原,管城,二七,邙山,惠济,经济技术开发区,郑东新区");

/*洛阳    */D[][] = new Array("涧西区,西工区,老城区,?河区,洛龙区,吉利区,偃师市,栾川县,孟津县,咸阳县,伊川县,宜阳县");

/*长春    */D[][] = new Array("朝阳,宽城,二道,南关,绿园,双阳,其它,吉林地区,高新,经开,净月,汽开");

/*吉林    */D[][] = new Array("昌邑区,船营区,龙潭区,丰满区,永吉县,舒兰市,磐石市,蛟河市,桦甸市,经开区,高新区");

/*哈尔滨  */D[][] = new Array("道里,道外,南岗,动力,平房,香坊,太平,开发区,阿城,呼兰,松北");

/*济南    */D[][] = new Array("市中,天桥,历下,槐荫,历城,长清,高新,济阳,平阴,商河,章丘");

/*青岛    */D[][] = new Array("市南,市北,四方,李沧,崂山,城阳,黄岛,即墨市,胶州市,胶南市,平度市,莱西市,开发区");

/*威海    */D[][] = new Array("环翠区,文登市,荣成市,乳山市,高区,经区");

/*烟台    */D[][] = new Array("芝罘区,福山区,龙口市,莱阳市,莱州市,蓬莱市,招远市,莱山区,开发区,牟平区,栖霞市,海阳市,长岛县");

/*潍坊    */D[][] = new Array("奎文,潍城,寒亭,坊子,寿光市,高新技术开发区,经济开发区");

/*日照    */D[][] = new Array("东港");

/*临沂    */D[][] = new Array("兰山");

/*合肥    */D[][] = new Array("中市,东市,西市,郊区,庐阳区,包河区,瑶海区,蜀山区,高新区,新站区,经开区,政务区,滨湖新区");

/*南宁    */D[][] = new Array("兴宁,青秀,西乡塘,江南,良庆,邕宁,桂林市,北海市,钦州市");

/*桂林    */D[][] = new Array("秀峰区,叠彩区,象山区,七星区,雁山区,西城区,八里街区");

/*北海    */D[][] = new Array("海城,银海,铁山港,合浦");

/*海南    */D[][] = new Array("海口市,三亚市,文昌市,琼海市,万宁市,儋州市,东方市,五指山市,保亭县,洋浦经济开发区,其他,定安县,澄迈县");

/*呼和浩特*/D[][] = new Array("回民,玉泉,新城,金川开发区,金桥开发区,金山开发区,如意开发区,赛罕,郊区,托克托,清水河,武川,和林格尔,土默特左旗");

/*太原    */D[][] = new Array("杏花岭,小店,迎泽,尖草坪,万柏林,晋源,榆次");

/*银川    */D[][] = new Array("城区,新城,兴庆区,金凤区,西夏区,永定县,贺兰县,灵武市");

/*兰州    */D[][] = new Array("城关,七里河,西固,安宁,红古,永登,榆中,皋兰");

/*西安    */D[][] = new Array("城北,城南,城东,城内,城西,高新,长安,临潼,蓝田,阎良,灞桥,咸阳");

/*西宁    */D[][] = new Array("城中,城东,城西,城北,湟源,湟中,大通回族土族自治县");

/*武汉    */D[][] = new Array("江汉,江岸,?口,汉阳,武昌,洪山,青山,东西湖,黄陂,江夏,阳逻,新洲,蔡甸,汉南,沌口");

/*宜昌    */D[][] = new Array("夷陵区,西陵区,伍家岗区,点军区,?亭区,宜都市,当阳市,枝江市,东山开发区,远安县,兴山县,秭归县,长阳土家族自治县,五峰土家族自治县");

/*长沙    */D[][] = new Array("岳麓,天心,雨花,开福,芙蓉,星沙,长沙经济开发区");

/*南昌    */D[][] = new Array("东湖,西湖,青云谱,湾里,昌北,高新开发区,红谷滩,南昌县,青山湖,新建县,郊区,进贤,安义");

/*昆明    */D[][] = new Array("盘龙区,五华区,官渡区,西山区,安宁,呈贡,其他,东川");

/*乌鲁木齐*/D[][] = new Array("天山,沙伊巴克,新市,水磨沟,头屯河,南泉,东山");

/*香港    */D[][] = new Array("北区,大埔去,东区,观塘区,黄大仙区,九龙城区,葵青区,离岛区,南区,沙田区,屯门区,湾仔区,西贡区,油尖旺区,元朗区,中西区,荃湾区");

/*台北    */D[][] = new Array();

///城市与省份的序列对应、每个城市与每个区域数组对应

//创建城市对象，返回一个该城市所在省份及所拥有区域的对象

function createCity(sCityName)

{

    var oCity = new Object();

    oCity.province = "";

    oCity.city = sCityName;

    oCity.dist = new Array();

    oCity.pindex = -;//所属省份在省份数组中的位置index

    oCity.cindex = -;//城市在所属城市数组中的位置index（二者用来确定区域数组）

    var m = -;var n = -;

    for(var i = ; i < C.length; i++)

    {

        for(var j=; j < C[i].length; j++)

        {

            if(C[i][j] == sCityName)

            {

                oCity.province = P[i];

                oCity.dist = D[i][j];

                oCity.pindex = i;

                oCity.cindex = j;

                break;

            }

        }

        if(oCity.province != "")

        {

            break;

        }

    }

    return oCity;

}

/*三级、省、市、区域*/

/*面向对象*/

function oMenu(selProvince,selCity,selDist)

{

    ///selProvince省份的select控件id

    ///selCity城市的select控件id

    ///selDist区域的select控件id

    this.oProvince = document.getElementById(selProvince);   

    ///城市变化，初始化区域

    function fnInitDist(city)

    {

        var objCity = createCity(city);

        var dist = objCity.dist.toString().split(',');

        ClearSelect(selDist,"请选择区域");

        InitSelect(selDist,dist,"");

    };

    ///初始化城市

    function fnInitCity(province)

    {

        for(var i = ;i < P.length;i++)

        {

            if(P[i] == province)

            {

                ClearSelect(selCity,"请选择城市");

                InitSelect(selCity,C[i],"");

                ClearSelect(selDist,"请先选择城市");

                document.getElementById(selCity).onchange = function (){fnInitDist(this.value);};

                break;

            }

        }

    };

    ///初始化省份

    this.fnInitProvince = function(){

        InitSelect(selProvince,P,"请选择省份");

        ClearSelect(selCity,"请先选择省份");

        ClearSelect(selDist,"请先选择城市");

        this.oProvince.onchange = function (){fnInitCity(this.value);};

    };

    ///初始化select控件

    function InitSelect(obj,aInitValue,sMenu)

    {

        ///obj:要初始化的select控件对象的id

        ///aInitValue:要初始化的数组值

        ///sMenu:在select控件头部要添加的option，value为空；如果该参数为空，则只初始化aInitValue而不加头部

        if(sMenu != "")

        {

            document.getElementById(obj).options.add(new Option(sMenu,""));

        }

        for(var i = ; i < aInitValue.length; i++)

        {

            document.getElementById(obj).options.add(new Option(aInitValue[i],aInitValue[i]));

        }

    }

    function ClearSelect(obj,sMenu)

    {

        document.getElementById(obj).options.length = ;

        document.getElementById(obj).options.add(new Option(sMenu,""));

    }   

}

    var oMenu = new oMenu("selProvince","selCity","selDist");//select ID

    oMenu.fnInitProvince();

  </script>

</body>

</html>

JS 省市区三级联动的更多相关文章

  1. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  2. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  3. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  4. 插件 原生js 省市区 三级联动 源码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 使用腾讯IP分享计划网站中的纯JS省市区三级联动

    JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...

  6. 【转】纯JS省市区三级联动（行政区划代码更新至2015-9-30）

    本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...

  7. 纯JS省市区三级联动

    代码下载

  8. 省市区三级联动——思路、demo、示例

    说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...

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

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

随机推荐

  1. tensorflow-gpu install check

    https://gist.github.com/mrry/ee5dbcfdd045fa48a27d56664411d41c#file-tensorflow_self_check-py-L16

  2. Swift中Singleton的实现

    一.意图 保证一个类公有一个实例,并提供一个访问它的全局访问点. 二.使用场景 1.使用场景 当类只能有一个实例而且客户可以从一个众所周知的访问点访问它时 当这个唯一实例应该是通过子类化可扩展的,并且 ...

  3. vector性能调优之resize与reserve

    vector的resize与reserve reserve()函数为当前vector预留至少共容纳size个元素的空间.(译注:实际空间可能大于size) resize() 函数( void resi ...

  4. 全新Ubentu系统没有make，gcc命令解决办法

    一定要记得先update sudo apt-get update 然后输入下述命令即可 sudo apt-get install make sudo apt-get install gcc

  5. python中的参数、全局变量及局部变量

    1.位置参数.关键字参数.默认参数的使用 位置参数.关键字参数 def test(x,y,z): print(x) print(y) print(z) test(1,2,3) #位置参数,必须一一对应 ...

  6. vue App.vue router 过渡效果, keep-alive 结合使用示例

    1, router.js配置 每个路由的index值 2, router.js配置 每个路由的keepAlive值 app.vue 代码 <template> <div id=&qu ...

  7. struts2接受请求参数

    https://blog.csdn.net/y249839817/article/details/77702745 https://blog.csdn.net/nthack5730/article/d ...

  8. 让Selenium稳定运行的技巧

    Selenium简介 Selenium是非常流行的Web自动化测试工具.它具有自动化测试用例制作简单,支持多种浏览器和不同的操作系统等优点. Selenium脚本不稳定的问题 有很多时候Seleniu ...

  9. POJ 2420 A Star not a Tree？【爬山法】

    题目大意:在二维平面上找出一个点,使它到所有给定点的距离和最小,距离定义为欧氏距离,求这个最小的距离和是多少(结果需要四舍五入)? 思路:如果不能加点,问所有点距离和的最小值那就是经典的MST,如果只 ...

  10. 使用HttpWebRequest post数据时要注意UrlEncode

    今天在用HttpWebResponse类向一个远程页面post数据时,遇到了一个怪问题:通过对比自己post的参数和服务器接收到的值,发现参数中的一个+号被替换成了空格. 造成这个错误的原因在于+号在 ...