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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
javascript 常见功能汇总
Jun 11 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
js实现拖拽与碰撞检测
Sep 18 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
php实现的替换敏感字符串类实例
2014/09/22 PHP
php 猴子摘桃的算法
2017/06/20 PHP
Display SQL Server Version Information
2007/06/21 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
jquery 插件开发备注
2010/08/27 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
jstree的简单实例
2016/12/01 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
详解js类型判断
2018/05/22 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python能否java成为主流语言吗
2020/06/22 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
2014年小学元旦活动方案
2014/02/12 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
管理失职检讨书范文
2015/05/05 职场文书
给领导敬酒词
2015/08/12 职场文书
初中政治教师教学反思
2016/02/23 职场文书
创业计划书之酒店
2019/08/30 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python