说明（2017-12-13 11:03:58）：

1. 这个功能应该是注册的时候非常、常用的了，不过现在都是微信登录，手机端自动获取位置什么的，可能就网站还用用吧！

2. 这个东西的难点在于统计各地省、市、自治区、以及茫茫多的地级市，是用数组还是json存？其实都可以，但要自己写，估计写两个省就跪了，真的是非常之多啊！所以无奈只能用别人写好的数组或json，而你一旦用了别人的数组或json，你就很难不用别人配套的js代码了，那我自己还写个J8啊！

3. 其实主要是为了了解一下三级联动的思路，学习一下jquery的简单操作。另外，毕竟别人写的，跟自己的需求有些出入，有些地方得知道怎么改。

4. 虽然最后还是用了别人的代码，哇哈哈哈哈！实在是不想自己创建省市数组！而且人家也没用jquery，用的原生js。虽然我也只是用了几个jquery的选择器。。

下面是自己写的demo，要引用jquery：

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

    <title></title>

</head>

<body>

    <select id="province">

        <option value="value">选择省</option>

        <!--<option value="value">北京</option>

        <option value="value">山东</option>-->

    </select>

    <select id="city">

        <option value="value">选择市</option>

    </select>

    <select id="district">

        <option value="value">选择区</option>

    </select>

</body>

<script src="jquery1.11.3.js" type="text/javascript"></script>

<script src="city.js" type="text/javascript"></script>

<script type="text/javascript">

    //获取省、市、区select节点

    var province = $("#province");

    var city = $("#city");

    var district = $("#district");

    //提前定义动态变量市、区

    var cities;

    var districts;

    //定义省、市下标

    var p_num;

    var c_num;

    //添加省

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

        province.append("<option value='value'>" + provinces[i] + "</option>");

    }

    //选择省后，添加市（如果点“选择省”，清空市区）（如果没查到对应的市，默认填充为“选择市”）

    province.change(function () {

        //先清空市、区

        city.empty();

        district.empty();

        city.append("<option value='value'>选择市</option>");

        district.append("<option value='value'>选择区</option>");

        var p = province.find("option:selected").text();

        if (p == "选择省") {

            city.empty();

            city.append("<option value='value'>选择市</option>");

        } else {

            //查找选择的省的下标

            for (var i in provinces) {

                if (provinces[i] == p) {

                    p_num = i;

                }

            }

            //网上一堆说eval不行的，不安全的，有很多替代方法的。麻痹找了一顿也没找到，我就用eval了！

            //动态查找市的变量名，显示

            cities = eval("p" + p_num);

            for (var i in cities) {

                city.append("<option value='value'>" + cities[i] + "</option>");

            }

        }

    }

    );

    //选择市后，添加区（如果点“选择市”，清空区）（如果没查到对应的区，默认填充为“选择区”）

    city.change(function () {

        var c = city.find("option:selected").text();

        if (c == "选择市") {

            district.empty();

            district.append("<option value='value'>选择区</option>");

        } else if ($.inArray(c, cities)) {

            //jquery的inarray方法，判断某个元素是不是在数组中

            district.empty();

            district.append("<option value='value'>选择区</option>");

        } else {

            for (var i in cities) {

                if (c == cities[i]) {

                    c_num = i;

                }

            }

            //            alert("p" + p_num + "_" + c_num);

            districts = eval("p" + p_num + "_" + c_num);

            for (var i in districts) {

                district.append("<option value='value'>" + districts[i] + "</option>");

            }

        }

    });

</script>

</html>

city.js

var provinces = ["山东", "北京"];

var p0 = ["济南市", "青岛市", "淄博市", "枣庄市"];

var p0_0 = ["市中区", "历下区", "天桥区", "槐荫区"];

var p0_1 = ["市南区", "市北区", "李沧区", "四方区"];

var p1 = ["北京"];

var p1_0 = ["东城", "西城", "海淀", "朝阳"];

补充：

1. 网上有人说可以这么写，变量中可以存储数组，但是这样有一个问题，如果有两个省份，有两个重名的市，那数组就会重名，比如北京的朝阳区，和辽宁的朝阳市，不过这俩可以通过区和市分成两个数组，但是其他地方有没有重名的市我就没做过调查了，应该说是有风险的。

var provinces = ["山东", "北京"];

Array["山东"] = ["济南市", "青岛市", "淄博市", "枣庄市"];

Array["济南市"] = ["市中区", "历下区", "天桥区", "槐荫区"];

Array["青岛市"] = ["市南区", "市北区", "李沧区", "四方区"];

Array["北京"] = ["北京市"];

Array["北京市"] = ["东城", "西城", "海淀", "朝阳"];

2. 我是用了纯数组的办法，一般网上比较好的示例都是用的json，比如下面这个，我就准备抄这个了：

纯JS省市区三级联动

省市区三级联动——思路、demo、示例的更多相关文章

  1. 第117天：Ajax实现省市区三级联动

    Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建o ...

  2. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  3. Android中使用开源框架citypickerview实现省市区三级联动选择

    1．概述 记得之前做商城项目,需要在地址选择中实现省市区三级联动,方便用户快速的填写地址,当时使用的是一个叫做android-wheel 的开源控件,当时感觉非常好用,唯一麻烦的是需要自己整理并解析省 ...

  4. PHPOffice/PHPExcel生成省市区三级联动的excel表格

    最近公司需要用到一个省市区三级联动的excel表格,但是数据都在数据库,又太多,人工不好制作,就让我这个phper来帮忙啦. 主要用到的是excel的定义名称,数据验证.其中数据验证的列表只能是一列或 ...

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

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

  6. 用jsp实现省市区三级联动下拉

    jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...

  7. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  8. WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)

    近期在实现收货地址功能,用到了省市区三级联动效果,网上找到一般都是xml或json.数据源陈旧改动麻烦.改动了一下使用数据库方式实现了一下 数据源解决.因为数据量比較大通过初始化批量运行SQL的方式不 ...

  9. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

随机推荐

  1. 一步一步写数据结构（二叉树的建立和遍历，c++）

    简述: 二叉树是十分重要的数据结构,主要用来存放数据,并且方便查找等操作,在很多地方有广泛的应用. 二叉树有很多种类,比如线索二叉树,二叉排序树,平衡二叉树等,本文写的是最基础最简单的二叉树. 思路: ...

  2. Linux学习之用户管理命令与用户组管理命令(十五)

    Linux学习之用户管理命令与用户组管理命令 目录 用户管理命令 用户添加命令useradd 修改用户密码passwd 修改用户信息usermod 修改用户密码状态chage 删除用户userdel ...

  3. QT学习之第一个程序

    QT学习之第一个程序 目录 手动创建主窗口 居中显示 添加窗口图标 显示提示文本 Message Box的应用 手动连接信号与槽 手动创建主窗口 窗口类型 QMainWindow: 可以包含菜单栏.工 ...

  4. 程序猿（媛）的葵花宝典-- 必备idea 插件plugins 提高编码效率

    最近发现了几个非常好用   提高编码效率 的idea 插件 跟大家分享一下,,,不用谢我!!!!!!!!!!!!! 因为idea自带的插件下载可能连接不上服务器而导致插件下载失败,所以这里推荐使用引入 ...

  5. 项目冲刺Third

    Third Sprint PS:经今天讨论,我们小队决定撤掉用GUI设计界面,改用html和php制作,所以需要修改前面的博客及重新分配任务 1.各个成员今日完成的任务 蔡振翼:撰写博客 谢孟轩:借阅 ...

  6. [洛谷3375]【模板】KMP字符串匹配

    思路: KMP模板. #include<cstdio> #include<cstring> ],s2[]; int main() { scanf("%s%s" ...

  7. Android studio 3.0以上版本无法引入，找不到v4，v7包方案解决

    Android studio 3.0以上版本无法引入v4.v7包报红,即找不到v4.v7包,解决方案如下: 步骤: 1,Close Object,点击左上角的关闭工程. 2,点击x,删除项目. 3,重 ...

  8. 95. 不同的二叉搜索树 II

    95. 不同的二叉搜索树 II 题意 给定一个整数 n,生成所有由 1 ... n 为节点所组成的二叉搜索树. 解题思路 这道题目是基于不同的二叉搜索树进行改进的: 对于连续整数序列[left, ri ...

  9. eclipse如何导入jar包 BUILD PATH

    http://blog.csdn.net/believejava/article/details/41750987

  10. 【转载】IntelliJ IDEA 内存优化最佳实践

    本文转自 http://blog.oneapm.com/apm-tech/426.html [编者按]本文作者在和同事的一次讨论中发现,对 IntelliJ IDEA 内存采用不同的设置方案,会对 I ...