体验效果: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. Windows安装和使用zookeeper

    之前整理过一篇文章<zookeeper 分布式锁服务>,本文介绍的 Zookeeper 是以 3.4.5 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apach ...

  2. 减小ipa体积之删除frameWork中无用mach-O文件

    最近项目末期, 我们团队为了ipa的大小使用不少的体积减小的方法, 除了一些常规的方法之外, 我分享一下自己研究出来的新思路. 首先我们来简单的介绍一下mach-O. 什么是mach-O? Mach- ...

  3. static与并发

    在java中static用来修饰Class类中属性和方法. 被static修饰的成员属性和成员方法独立于该类的任何对象,它们在内存空间上会被放在描述Class的位置中,也就是说它们为此类(Class) ...

  4. Win8 Metro动态加载内容框架

    制作背景 为了参加ImagineCup 2013 世界公民类比赛,我们设计制作了一个可动态扩展的幼教类App.这个App需要能动态加载内容,内容包括带动画可交互的电子书,动画,视频,游戏. 技术支持 ...

  5. Android学习第一天-adb常用命令

    平时开发android应用 的时候,我们都会用到包含在Android SDK中一系列的工具,或许我们通过Eclipse去调用,又或许,我们自己通过打开终端进行手动输入并且执行,下面我们来一起学习下这些 ...

  6. 神兵利器——Alfred

    有人的地方就有江湖,有江湖就有纷争. 很多人说我的文字风格相对轻松和温和,那是因为我很早就认识到,我们没有教育脑残和喷子的义务.在网际多年,看过太多虚拟的刀锋和鲜血,很多人被彻头彻尾的粉碎,挫骨扬灰, ...

  7. java spring 邮件发送

    开发中经常会遇到发送邮件进行用户验证,或者其它推送信息的情况,本文基于spring,完成邮件的发送,主要支持普通文本邮件的发送,html文本邮件的发送,带附件的邮件发送,没有实现群发.多个附件发送等需 ...

  8. Redis初级介绍

    1 什么是Redis Redis(REmote DIctionary Server,远程数据字典服务器)是开源的内存数据库,常用作缓存或者消息队列. Redis的特点: Redis存在于内存,使用硬盘 ...

  9. WCF 安全性之 自定义用户名密码验证

    案例下载 http://download.csdn.net/detail/woxpp/4113172 客户端调用代码 通过代理类 代理生成 参见 http://www.cnblogs.com/woxp ...

  10. Yii2-多表关联的用法示例

    本篇博客是基于<活动记录(Active Record)>中对于AR表关联用法的介绍. 我会构造一个业务场景,主要是测试我比较存疑的各种表关联写法,而非再次介绍基础用法. 构造场景 订单ar ...