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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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高级对象构建 多个构造函数的使用
2012/02/05 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
JavaScript模拟push
2016/03/06 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
整理Python中的赋值运算符
2015/05/13 Python
详细介绍Python的鸭子类型
2016/09/12 Python
Python中的__slots__示例详解
2017/07/06 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
实习心得体会
2014/01/02 职场文书
环保公益广告语
2014/03/13 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
班主任经验交流材料
2014/12/16 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书