体验效果:http://hovertree.com/texiao/bootstrap/4/
支持PC和手机移动端.

手机扫描二维码体验效果：

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>：jQuery省市区三级联动插件city-picker</title>

<base target="_blank" />

<!--可无视-->

<link href="http://hovertree.com/texiao/bootstrap/4/css/main.css" rel="stylesheet" type="text/css" />

<!--必要样式-->

<link href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="http://hovertree.com/texiao/bootstrap/4/css/city-picker.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!-- Content -->

<div class="container">

<h2 class="page-header">演示</h2>

<div class="docs-methods">

<form class="form-inline">

<div id="distpicker">

<div class="form-group">

<div style="position: relative;">

<input id="city-picker3" class="form-control" readonly type="text" value="江苏省/常州市/溧阳市" data-toggle="city-picker">

</div>

</div>

<div class="form-group">

<button class="btn btn-warning" id="reset" type="button">重置</button>

<button class="btn btn-danger" id="destroy" type="button">确定</button>

</div>

</div>

</form>

</div>

</div>

<div class="container"><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/5gbv36dt.htm">原文</a> <a href="http://hovertree.com/texiao/jquery/22/">效果2</a> </div>

<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>

<script src="http://hovertree.com/ziyuan/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="http://hovertree.com/texiao/bootstrap/4/js/city-picker.data.js"></script>

<script src="http://hovertree.com/texiao/bootstrap/4/js/city-picker.js"></script>

<script src="http://hovertree.com/texiao/bootstrap/4/js/main.js"></script>

</body>

</html>

数据来源:http://hovertree.com/h/bjae/vm6plijj.htm

转自:http://hovertree.com/h/bjaf/5gbv36dt.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

jQuery省市区三级联动插件的更多相关文章

  1. 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理（在线下单）

    1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...

  2. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  3. jquery省市区三级联动(数据来源国家统计局官网)内附源码下载

    很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...

  4. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

  5. JS(JQuery) 省市区三级联动下拉选择

    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...

  6. Jquery省市区三级联动案例

    //Java部分代码 public String province() throws Exception { List<Province> list=cityBiz.showProvinc ...

  7. 省市区三级联动插件：app-jquery-cityselect.js

    (function ($) { $.fn.cityselect = function (options) { var settings = $.extend ({}, options); this.e ...

  8. jQuery省市区三级联动菜单

    <style> select{ padding:5px 0; } .outer{ width:500px; margin:20px auto; } </style> <d ...

  9. 基于Vue的省市区三级联动插件

    官网地址:https://distpicker.uine.org/ 安装: npm install v-distpicker --save 局部注册: import VDistpicker from ...

随机推荐

  1. ReactJS入门（二）—— 组件的生命周期

    如果你熟悉avalon,使用过 data-include-rendered 和 data-include-loaded 等回调方法,那么你会很好地理解React组件的各个生命周期. 说白了其实就是Re ...

  2. Hadoop学习笔记—17.Hive框架学习

    一.Hive:一个牛逼的数据仓库 1.1 神马是Hive? Hive 是建立在 Hadoop 基础上的数据仓库基础构架.它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储. ...

  3. 走向面试之数据库基础：三、SQL进阶之变量、事务、存储过程与触发器

    一.变量那点事儿 1.1 局部变量 (1)声明局部变量 DECLARE @变量名 数据类型 ) DECLARE @id int (2)为变量赋值 SET @变量名 =值 --set用于普通的赋值 SE ...

  4. C++高精度计时器——微秒级时间统计

    在C++中,经常需要通过计时来统计性能信息,通过统计的耗时信息,来分析性能瓶颈,通常情况下,可能毫秒级别的时间统计就足够用了,但是在毫厘必争的性能热点的地方,毫秒级别的统计还是不够的,这种情况下,就需 ...

  5. 企业IT管理员IE11升级指南【4】—— IE企业模式介绍

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  6. 我为什么很烦在DB服务器上安装杀毒软件

    常见的数据库连接问题无外乎是在数据库服务器本地可以连接SQL Server,但通过其他服务器就不可以连接.但这次我却碰到了相反的情况,在服务器本地无法通过IP/实例名连接,但从其他服务器却可以.而且每 ...

  7. Repository 仓储，你的归宿究竟在哪？（二）－这样的应用层代码，你能接受吗？

    写在前面 关于"Repository 仓储,你的归宿究竟在哪?"这个系列,本来是想写个上下篇,但是现在觉得,很有多东西需要明确,我也不知道接下来会写多少篇,所以上一篇的标题就改成了 ...

  8. ASP.NET MVC 5 - 视图

    在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...

  9. chrome使用技巧（看了定不让你失望）

    写在前面 之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了.对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其它chrome使用方面的诀窍) ...

  10. Linux下安装Java环境配置步骤详述

    0.下载jdk8 登录网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html选择对 ...