首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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下载地址

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

js省市区级联查询（插件版&amp;无插件版）

- Author -

zt_fucker

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 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
SnakeGame(1) cvzone(1) 德生2P3(1) python小游戏(5) 贪吃蛇(2) 计算机视觉(2) mediapipe(1) 无限迭代(1) for(1) while(1)
You might like
谈谈PHP语法(5)
2006/10/09 PHP
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php数组去重复数据示例
2014/02/25 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
php实现登录页面的简单实例
2019/09/29 PHP
转一个日期输入控件，支持FF
2007/04/27 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
javascript几个易错点记录
2014/11/26 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python递归实现快速排序
2018/08/18 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
详解python中的Turtle函数库
2018/11/19 Python
Python读写文件基础知识点
2019/06/10 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
自我评价的写作规则
2014/01/06 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书