jQuery省市区三级联动插件

体验效果: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省市区三级联动插件相关推荐

jquery省市区三级联动插件，无ajax
是否觉得使用ajax+数据库来搞省市区三级联动很麻烦?不妨试试纯js实现吧.今天无意间在网上找到个省市区的jason数据,js写的,索性自己写了一个新的,以jquery插件形式实现,代码比网上找的小了 ...
jquery省市区ajax,jQuery省市区三级联动
jQuery省市区三级联动演示下载,本文将给大家介绍一款非常好用的省市区三级联动插件:cityselect.通过这款城市联动插件,省市区三级联动cityselect插件可以无刷新省市区联动效果. 查看 ...
js原生，省市区三级联动插件
js原生,省市区三级联动插件 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
一款超好的省市区三级联动插件citypicher的使用（数据分从数据库获取或从js文件获取）
有兴趣的小伙伴,可以继续阅读小编下一篇博客微服务概述添加链接描述一篇对SpringCloud的介绍添加链接描述 SpringCloud核心组件详述添加链接描述一篇对MySQL语句执行顺序的介绍添 ...
三级联动数据库添加html,前端jQuery最新省市区三级联动插件，包含sql数据库
一.目录结构二.功能演示 1)用浏览器打开,index.html 2)单击,输入框, 3)选择省份 4).选择城市 5).选择区县 6).显示已选中的名称和ID 三.前端页面html> 地区数 ...
html省市联动插件,jquery实现的交互体验更友好省市区三级联动插件
Options Change the default options with $().citypicker(options). Change the global default options w ...
html5手机移动端三级联动城市选择器,jquery移动端省市县（区）三级联动插件
最近刚做完一个版本的项目,闲暇时间,就索性把项目中需要用到的插件都自己写了一个,毕竟自己动手丰衣足食才是最重要,自己写的,可以应对各种项目需求,今天又把手机端的省市区三级联动选择功能编写了一个插件出来 ...
省市区三级联动最新县及县以上行政区划代码来源：国家统计局
http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html jquery省市区三级联动(数据来源国家统计局官网)内附源码 ...
vue中实现省市区三级联动(V-Distpicker插件)
本次项目中使用了V-Distpicker 插件实现了省市区三级联动 V-Distpicker 项目文档地址 V-Distpicker git地址使用方法 npm install v-distpick ...

jQuery省市区三级联动插件

jQuery省市区三级联动插件相关推荐

最新文章

热门文章