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 相关文章推荐
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
three.js 如何制作魔方
Jul 31 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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性能优化 产生高度优化代码
2011/07/22 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
一些不错的js函数ajax
2008/08/20 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python实现简单成绩录入系统
2019/09/19 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
python 获取字典键值对的实现
2020/11/12 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
法院授权委托书范文
2014/08/02 职场文书
化工实习心得体会
2014/09/09 职场文书
文案策划岗位职责
2015/02/11 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS