jquery实现的省市区三级联动


Posted in Javascript onApril 02, 2015

省市级联动,附使用示例和数据表数据

有部分数据精确到乡镇一级!!!

Git 地址:http://git.oschina.net/upliu/province-city-district

演示代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>省市区三级联动</title>
</head>
<body>
<form method="post" action="post.php">
  <div id="area"></div>
  <input type="submit" style="margin-top: 10px;">
</form>
<script src="jquery-2.1.3.min.js"></script>
<script src="area.js"></script>
<script>
  $(function(){
 
    add_select(0);
 
    $('body').on('change', '#area select', function() {
      var $me = $(this);
      var $next = $me.next();
      /**
       * 如果下一级已经是当前所选地区的子地区,则不进行处理
       */
      if ($me.val() == $next.data('pid')) {
        return;
      }
      $me.nextAll().remove();
      add_select($me.val());
    });
 
    function add_select(pid) {
      var area_names = area['name'+pid];
      if (!area_names) {
        return false;
      }
      var area_codes = area['code'+pid];
      var $select = $('<select>');
      $select.attr('name', 'area[]');
      $select.data('pid', pid);
      if (area_codes[0] != -1) {
        area_names.unshift('请选择');
        area_codes.unshift(-1);
      }
      for (var idx in area_codes) {
        var $option = $('<option>');
        $option.attr('value', area_codes[idx]);
        $option.text(area_names[idx]);
        $select.append($option);
      }
      $('#area').append($select);
    };
  });
</script>
</body>
</html>

以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
javascript中的this详解
Dec 08 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
JavaScript实现的链表数据结构实例
Apr 02 #Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 #Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 #Javascript
Javascript中数组方法汇总(推荐)
Apr 01 #Javascript
javascript闭包的理解
Apr 01 #Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 #Javascript
JavaScript之Object类型介绍
Apr 01 #Javascript
You might like
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python制作CSDN免积分下载器
2015/03/10 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书