js省市区级联查询（插件版&无插件版）

更新时间：2017年03月21日 16:08:20 作者：zt_fucker

这篇文章主要为大家详细介绍了js省市区级联查询，包括插件版和无插件版，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

实现方式千差万别，满足自己需求的才是最好的。

插件版提供了两种方式：

distpicker版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/city.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/distpicker.data.js"></script>
<script src="js/distpicker.js"></script>
</head>
<body>
<h5>Demo:</h5>
<form class="form-inline">
 <div data-toggle="distpicker">
  <div class="form-group">
   <label class="sr-only" for="province1">Province</label>
   <select class="form-control" id="province1"></select>
  </div>
  <div class="form-group">
   <label class="sr-only" for="city1">City</label>
   <select class="form-control" id="city1"></select>
  </div>
  <div class="form-group">
   <label class="sr-only" for="district1">District</label>
   <select class="form-control" id="district1"></select>
  </div>
 </div>
</form>   
</body>
</html>

distpicker.data.js 、distpicker.js 下载地址

第二种插件版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/city.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/city.min.js"></script>
</head>
<body>
    <div id="content-wrap">   
      <div id="content-left" class="demo">
        <form action="" name="form1">
            <div class="infolist">
              <lable>所在地区：</lable>
              <div class="liststyle">
                <span id="Province">
                  <i>请选择省份</i>
                  <ul>
                    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="请选择省份">请选择省份</a></li>
                  </ul>
                  <input type="hidden" name="cho_Province" value="请选择省份">
                </span>
                <span id="City">
                  <i>请选择城市</i>
                  <ul>
                    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="请选择城市">请选择城市</a></li>
                  </ul>
                  <input type="hidden" name="cho_City" value="请选择城市">
                </span>
                <span id="Area">
                  <i>请选择地区</i>
                  <ul>
                    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" alt="请选择地区">请选择地区</a></li>
                  </ul>
                  <input type="hidden" name="cho_Area" value="请选择地区">
                </span>
              </div>
            </div>
          </form> 
      </div>
      <div id="content-right"></div>
    </div>
</body>
</html>

相关js下载地址：链接: jqueryminjs

css下载地址：链接: css

无插件版：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" >
  </head>

  <body>
    <p>&nbsp;</p>
    <div class="row">
      <div class="col-sm-12">
        <div class="form-group">
          <label class="control-label col-sm-2">所在区域</label>
          <div class="col-sm-3">
            <select name="input_province" id="input_province" class="form-control">
            </select>
          </div>
          <div class="col-sm-3">
            <select name="input_city" id="input_city" class="form-control">
            </select>
          </div>
          <div class="col-sm-3">
            <select name="input_area" id="input_area" class="form-control">
            </select>
          </div>
        </div>
      </div>
    </div>
    <p>&nbsp;</p>
    <div class="row text-center">数据来源：
      <a href="http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html" target="_blank">http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html</a>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/pdata.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function() {
        var html = "<option value=''>== 请选择 ==</option>";
        $("#input_city").append(html);
        $("#input_area").append(html);
        $.each(pdata, function(idx, item) {
          if(parseInt(item.level) == 1) {
            html += "<option value='" + item.name + "' exid='" + item.code + "'>" + item.name + "</option>";
          }
        });
        $("#input_province").append(html);

        $("#input_province").change(function() {
          if($(this).val() == "") return;
          $("#input_city option").remove();
          $("#input_area option").remove();
          var code = $(this).find("option:selected").attr("exid");

          code = code.substring(0, 2);
          var html = "<option value=''>== 请选择 ==</option>";
          $("#input_area").append(html);
          $.each(pdata, function(idx, item) {
            if(parseInt(item.level) == 2 && code == item.code.substring(0, 2)) {
              html += "<option value='" + item.name + "' exid='" + item.code + "'>" + item.name + "</option>";
            }
          });
          $("#input_city").append(html);
        });

        $("#input_city").change(function() {
          if($(this).val() == "") return;
          $("#input_area option").remove();
          var code = $(this).find("option:selected").attr("exid");
          code = code.substring(0, 4);
          var html = "<option value=''>== 请选择 ==</option>";
          $.each(pdata, function(idx, item) {
            if(parseInt(item.level) == 3 && code == item.code.substring(0, 4)) {
              html += "<option value='" + item.name + "' exid='" + item.code + "'>" + item.name + "</option>";
            }
          });
          $("#input_area").append(html);
        });
        //绑定
        $("#input_province").val("山东省");
        $("#input_province").change();
        $("#input_city").val("潍坊市");
        $("#input_city").change();
        $("#input_area").val("诸城市");

      });
    </script>
  </body>
</html>

pdata.js下载地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

js实现圆盘记速表
本文分享了一个利用AmCharts制作的汽车速度计速表，通过设置不同的速度（数字）来动态改变计速表的指针。使用也非常简单，下面给出方法。
2015-08-08
js实现动态加载数据瀑布流
这篇文章主要为大家详细介绍了js实现动态加载数据瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JavaScript定义数组的三种方法(new Array(),new Array(''x'',''y'')
下面小编就为大家带来一篇JavaScript定义数组的三种方法(new Array(),new Array('x','y')。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
JS前端开发之exec()和match()的对比使用
match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,下面这篇文章主要给大家介绍了关于JS前端开发之exec()和match()的对比使用的相关资料,需要的朋友可以参考下
2022-09-09
微信小程序 wepy框架与iview-weapp的用法详解
这篇文章主要介绍了微信小程序 wepy框架与iview-weapp的用法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
详解关于html，css，js三者的加载顺序问题
这篇文章主要介绍了关于html，css，js三者的加载顺序问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
JavaScript数组复制详解
对于javascript来说，数组是一种引用类型，如果只是一维数组的话，复制还较为容易，如果是多维数组呢？如何实现多维数组的深度复制？
2017-02-02
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
最近想给JS特效与模板预览页面加上屏蔽查看源文件，防治整理不易的源码被轻易拿走，发现IE、火狐、chrome等各类浏览器支持不一样。下面是脚本之家整理的一些屏蔽总结
2020-10-10
easyui-datagrid特殊字符不能显示的处理方法
下面小编就为大家带来一篇easyui-datagrid特殊字符不能显示的处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
js tab栏切换代码实例解析
这篇文章主要介绍了js tab栏切换代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09

js省市区级联查询（插件版&无插件版）

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具