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 相关文章推荐
js确认删除对话框效果的示例代码
Feb 20 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
switchery按钮的使用方法
Dec 18 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
详解vue中v-for的key唯一性
May 15 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网页后退不再出现过期
2007/03/08 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
python mysqldb连接数据库
2009/03/16 Python
python抓取网页中的图片示例
2014/02/28 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
python中global与nonlocal比较
2014/11/21 Python
学习python类方法与对象方法
2016/03/15 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
名片管理系统python版
2018/01/11 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
pandas apply多线程实现代码
2020/08/17 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
《掌声》教学反思
2014/02/23 职场文书
学校招生宣传广告词
2014/03/19 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
工程部文员岗位职责
2015/02/04 职场文书
一个都不能少观后感
2015/06/04 职场文书
走进科学观后感
2015/06/18 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript