jquery省市区三级联动(数据来源国家统计局官网)内附源码下载
很久很久没有写博了。
今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们。。。
JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中。
数据来源于国家统计局官网。
先上图:
绑定省市区
使用方法:
1. 引用JQUERY <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
2. 引用省市区数据 <script type="text/javascript" src="pdata.js"></script>
3. HTML代码:
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2">所在区域</label>
<div class="col-sm-3">
<select name="input_province" id="input_province" class="form-control">
</select>
</div>
<div class="col-sm-3">
<select name="input_city" id="input_city" class="form-control">
</select>
</div>
<div class="col-sm-3">
<select name="input_area" id="input_area" class="form-control">
</select>
</div>
</div>
</div>
</div>
4. JS代码:
$(function () {
var html = "<option value=''>== 请选择 ==</option>"; $("#input_city").append(html); $("#input_area").append(html);
$.each(pdata,function(idx,item){
if (parseInt(item.level) == 0) {
html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
}
});
$("#input_province").append(html); $("#input_province").change(function(){
if ($(this).val() == "") return;
$("#input_city option").remove(); $("#input_area option").remove();
var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,2);
var html = "<option value=''>== 请选择 ==</option>"; $("#input_area").append(html);
$.each(pdata,function(idx,item){
if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
}
});
$("#input_city").append(html);
}); $("#input_city").change(function(){
if ($(this).val() == "") return;
$("#input_area option").remove();
var code = $(this).find("option:selected").attr("exid"); code = code.substring(0,4);
var html = "<option value=''>== 请选择 ==</option>";
$.each(pdata,function(idx,item){
if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
html += "<option value='" + item.names + "' exid='" + item.code + "'>" + item.names + "</option>";
}
});
$("#input_area").append(html);
});
//绑定
$("#input_province").val("广东省");$("#input_province").change();
$("#input_city").val("深圳市");$("#input_city").change();
$("#input_area").val("罗湖区"); });
源码下载:点击下载,解压密码 im531
某某公司又有神马 猝死 的,,,生命是革命的本钱,洗洗睡觉。。。
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载的更多相关文章
- jquery省市区三级联动
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- 分享一组很赞的 jQuery 特效【附源码下载】
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 ...
- 基于Python接口自动化测试框架+数据与代码分离(进阶篇)附源码
引言 在上一篇<基于Python接口自动化测试框架(初级篇)附源码>讲过了接口自动化测试框架的搭建,最核心的模块功能就是测试数据库初始化,再来看看之前的框架结构: 可以看出testcase ...
- 关于js渲染网页时爬取数据的思路和全过程(附源码)
于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- JS(JQuery) 省市区三级联动下拉选择
引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
- Jquery省市区三级联动案例
//Java部分代码 public String province() throws Exception { List<Province> list=cityBiz.showProvinc ...
- jQuery省市区三级联动菜单
<style> select{ padding:5px 0; } .outer{ width:500px; margin:20px auto; } </style> <d ...
随机推荐
- UVA12167 Proving Equivalences
UVA12167 Proving Equivalences 题意翻译 题目描述 在数学中,我们常常需要完成若干命题的等价性证明. 例如:有4个命题a,b,c,d,要证明他们是等价的,我们需要证明a&l ...
- webpack 多页面|入口支持和公共组件单独打包--转载
转载自:http://www.jb51.net/article/117490.htm 本篇主要介绍:如何自动构建入口文件,并生成对应的output:公共js库如何单独打包. 多入口文件,自动扫描入口. ...
- JVM 体系结构介绍
JVM是Java的一大利器.它可以屏蔽各个计算机平台相关软件和硬件之间的差异.把平台相关的耦合统一工作交由JVM的实现者. JVM(Java 虚拟机),它通过模拟一个计算机来达到一个计算机所拥有的计算 ...
- codevs 1080 线段树练习 CDQ分治
codevs 1080 线段树练习 http://codevs.cn/problem/1080/ 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description 一行N个 ...
- Java并发编程原理与实战二十二:Condition的使用
Condition的使用 Condition用于实现条件锁,可以唤醒指定的阻塞线程.下面来实现一个多线程顺序打印a,b,c的例子. 先来看用wait和notify的实现: public class D ...
- Spring Boot后台启动不打印nohup.out
#!/bin/bashnohup java -jar websocket-server-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod --serve ...
- mysql 允许远程登录
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '密码' WITH GRANT OPTION;flush privileges;
- Callable,Future,FutureTask
1.概念定义 2.实现例子 3.总结 1.概念定义 1.Callable Callable是一个接口,效果类似Runnable接口.实现该接口,然后,耗时操作在call()方法中执行.与Run ...
- STL-pair
每个pair 可以存储两个值.这两种值无限制. 定义 pair<int,char> p; pair<string,int> p; pair<int,int> p; ...
- 【译】第十篇 Integration Services:高级事件行为
本篇文章是Integration Services系列的第十篇,详细内容请参考原文. 简介在前一篇, we introduced fault tolerance by examining method ...