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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
node.js require() 源码解读
Dec 13 Javascript
基于jquery实现图片放大功能
May 07 Javascript
js实现弹窗居中的简单实例
Oct 09 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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无限遍历文件夹示例分享
2014/03/04 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
理解Python中的With语句
2015/02/02 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
初中生学习的自我评价
2013/11/14 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
化妆品店促销方案
2014/02/24 职场文书
水电维修专业推荐信
2014/09/06 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
城管年度个人总结
2015/02/28 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
召开会议通知范文
2015/04/15 职场文书
降价通知函
2015/04/23 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android