体验效果: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. Linux堆内存管理深入分析(上)

    Linux堆内存管理深入分析(上半部) 作者:走位@阿里聚安全   0 前言 近年来,漏洞挖掘越来越火,各种漏洞挖掘.利用的分析文章层出不穷.从大方向来看,主要有基于栈溢出的漏洞利用和基于堆溢出的漏洞 ...

  2. gulp es7配置文件

    http://sanwen.net/a/ybsfcoo.html /** * Created by udi on 2016/11/24. */ var gulp = require('gulp'); ...

  3. 搭建前端私有npm杂记

    随着前端队伍越来越壮大,项目间共享代码就变得尤为重要.常用的框架/类库没必要在每个项目都放一份,团队内部产出的公共模块也需要有合理的共享机制.现在,用npm管理前端代码已经是业界趋势.楼主尝试用私有n ...

  4. CLR via C# 学习计划

    本书是学习c#的人必读书,计划今年完成,读透. 书是在亚马逊买的,虽然有点小贵,但是为了情怀,咬咬牙买了. 需要学习的: CLR基础 (CH1-CH3) 设计类型 (CH4-CH13) 基本类型 (C ...

  5. PHPCMS后台密码忘记解决办法

    什么是PHPCMS? PHPCMS是一款网站管理软件.该软件采用模块化开发,支持多种分类方式,使用它可方便实现个性化网站的设计.开发与维护.它支持众多的程序组合,可轻松实现网站平台迁移,并可广泛满足各 ...

  6. Sublime Text3 配置 NodeJs 环境

    前言 大家都知道,Sublime Text 安装插件一般从 Package Control 中直接安装即可,当我安装 node js 插件时候,直接通过Package Control 安装,虽然插件安 ...

  7. PHP的静态和接口

    静态普通成员普通成员属于对象//静态成员//静态成员属于类//static 关键字 变成静态成员/*class ren {    public $name;    public static $zho ...

  8. c#设计模式-组合模式

    在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象和复合对象 ...

  9. 这台计算机上缺少此项目引用的 NuGet 程序包-缺少的文件是 ..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 协助开发里面总有几个是极简爱好者,但是呢删了不该删的就会影响项目开发,下面看下完 ...

  10. ImageView设置边框的两种方式

    转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...