基于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 相关文章推荐
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
jquery仿微信聊天界面
May 06 jQuery
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
详解小程序循环require之坑
Mar 08 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 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中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php生成短域名函数
2015/03/23 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
经销商培训邀请函
2014/01/21 职场文书
电信营业员岗位职责
2015/04/14 职场文书
民间借贷被告代理词
2015/05/23 职场文书
情感电台广播稿
2015/08/18 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle