基于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 lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
浅谈js中变量初始化
Feb 03 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 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 移除数组重复元素的一点说明
2008/11/27 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
Knockout visible绑定使用方法
2013/11/15 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
Position属性之relative用法
2015/12/14 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
python写xml文件的操作实例
2014/10/05 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python查看数据类型的方法
2019/10/12 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python错误的处理方法
2020/06/23 Python
python判断元素是否存在的实例方法
2020/09/24 Python
python实现计算图形面积
2021/02/22 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
游戏商店:Eneba
2020/04/25 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
工程售后服务方案
2014/06/08 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
学习普通话的体会
2014/11/07 职场文书
社区宣传标语口号
2015/12/26 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python