说明(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. Css实现元素的垂直居中

    前言: 在写CSS的时候让元素在高度固定的容器中垂直居中是很简单的,譬如设置容器的padding或者元素的margin之类的都可以做到:让元素在容器中水平居中也有text-align:center.m ...

  2. django-用户验证系统

    django提供了一套用户验证系统,但是要使用这个系统,必须要使用django内置的用户模型:django.contrib.auth.models.User,这个模型中预先定义了一些字段,其中只有us ...

  3. GCC&&GDB在OI中的介绍

    序言 这本来是用Word写的,但是后来我换了系统所以只能用markdown迁移然后写了...... $\qquad$本文主要投食给那些在Windows下活了很久然后考试时发现需要用命令行来操作时困惑万 ...

  4. AGC 027C.ABland Yard(拓扑/二分图)

    题目链接 \(Description\) 给定一张图(可能存在自环),每个点上有A或B.求是否存在一条路径,使得在上面不断走,能够得到所有AB串组合(可以重复经过点). \(n\leq2\times1 ...

  5. Topcoder SRM590 Fox And City

    Problem Statement      There is a country with n cities, numbered 0 through n-1. City 0 is the capit ...

  6. 2041 ACM 超级楼梯

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2041 数学问题,找规律,可以先假设全一步,然后一个两步的,两个两步的~~.很容易发现规律:F[N]=F[N ...

  7. 给Linux系统管理员准备的Nmap命令的29个实用范例

    map即网络映射器对Linux系统/网络管理员来说是一个开源且非常通用的工具.Nmap用于在远程机器上探测网络,执行安全扫描,网络审计和搜寻开放端口.它会扫描远程在线主机,该主机的操作系统,包过滤器和 ...

  8. git 删除分支 远程 && 本地

    //查看远程分支 git branch -a //删除远程分支 git branch -r -d origin/branch-name git push origin :branch-name// 或 ...

  9. POIUtil

    package com.util.poi; import java.io.ByteArrayOutputStream; import java.io.IOException; import java. ...

  10. Java实现字符串倒序输出的几种方法

    1. 最容易想到的估计就是利用String类的toCharArray(),再倒序输出数组的方法了. import javax.swing.JOptionPane; public class Rever ...