基于jquery实现省市区三级联动效果


Posted in Javascript onDecember 25, 2015

本文实现更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们。
JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中。

说明:数据来源于国家统计局官网。

先上图:

基于jquery实现省市区三级联动效果

绑定省市区

基于jquery实现省市区三级联动效果

使用方法:

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("罗湖区");

 });

源码下载: 《基于jquery实现省市区三级联动效果》

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JS 数字转换研究总结
Dec 26 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
js实现文本框输入文字个数限制代码
Dec 25 #Javascript
js实现简单的验证码
Dec 25 #Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 #Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 #Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 #Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 #Javascript
基于JS2Image实现圣诞树代码
Dec 24 #Javascript
You might like
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
chrome原生方法之数组
2011/11/30 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
matplotlib绘制动画代码示例
2018/01/02 Python
python实现数据写入excel表格
2018/03/25 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
英语一分钟演讲稿
2014/04/29 职场文书
党员查摆剖析材料
2014/10/10 职场文书
投诉信格式范文
2015/07/02 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
消防安全培训工作总结
2015/10/23 职场文书
python实现简易名片管理系统
2021/04/11 Python
golang中的struct操作
2021/11/11 Golang
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python