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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JavaScript数组常用方法
Mar 02 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
angular select 默认值设置方法
Jun 23 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
php 高性能书写
2010/12/11 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
javascript中判断json的方法总结
2015/08/27 Javascript
对javascript继承的理解
2016/10/11 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
咖啡厅创业计划书范本
2014/01/22 职场文书
图书馆标语
2014/06/19 职场文书
给校长的一封检讨书
2014/09/20 职场文书
岗位职责范本大全
2015/02/26 职场文书
党员自我评价2015
2015/03/03 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python