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 相关文章推荐
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
详解.vue文件解析的实现
Jun 11 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
前端Electron新手入门教程详解
Jun 21 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 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传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python实现excel转sqlite的方法
2017/07/17 Python
python实现最长公共子序列
2018/05/22 Python
python xpath获取页面注释的方法
2019/01/14 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
keras导入weights方式
2020/06/12 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
体育学院毕业生自荐信
2013/11/03 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
团队拓展活动总结
2014/08/27 职场文书
回复函范文
2015/07/14 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
SpringBoot集成Redis的思路详解
2021/10/16 Redis
pandas中对文本类型数据的处理小结
2021/11/01 Python
7个关于Python的经典基础案例
2021/11/07 Python