js省市区级联查询(插件版&无插件版)


Posted in Javascript onMarch 21, 2017

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

插件版提供了两种方式:

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>

js省市区级联查询(插件版&amp;无插件版)

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省市区级联查询(插件版&amp;无插件版)

相关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> </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> </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>

js省市区级联查询(插件版&amp;无插件版)

pdata.js下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
小程序关于请求同步的总结
May 05 Javascript
vue实现计步器功能
Nov 01 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 #Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 #Javascript
node安装--linux下的快速安装教程
Mar 21 #Javascript
Vue 单文件中的数据传递示例
Mar 21 #Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 #Javascript
详解Vue 实例中的生命周期钩子
Mar 21 #Javascript
十大热门的JavaScript框架和库
Mar 21 #Javascript
You might like
PHP连接MySQL数据的操作要点
2015/03/20 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
入党综合考察材料
2014/06/02 职场文书
写字楼租赁意向书
2014/07/30 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2014年服务员工作总结
2014/11/18 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
北京故宫导游词
2015/01/31 职场文书
商务代表岗位职责
2015/02/15 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
法定代表人免职证明
2015/06/24 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
《实心球》教学反思
2016/02/23 职场文书