jquery实现的省市区三级联动

2019-11-20 12:47:44

字体：大中小

来源：转载

供稿：网友

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

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

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实现百度地图鼠标滑动事件显示、隐藏

下一篇：JavaScript实现的链表数据结构实例