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 全局AJAX事件使用代码
Nov 05 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
JavaScript如何操作css
Oct 24 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中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
浅析vue数据绑定
2017/01/17 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
原生javascript中this几种常见用法总结
2020/02/24 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
为Python的web框架编写前端模版的教程
2015/04/30 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
详解【python】str与json类型转换
2019/04/29 Python
python打开windows应用程序的实例
2019/06/28 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
解决python运行启动报错问题
2020/06/01 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
进修护士自我鉴定
2013/10/14 职场文书
成龙洗发水广告词
2014/03/14 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
优秀教师单行材料
2014/12/16 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers