jQuery省市区三级联动插件city-picker js代码

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery省市区三级联动插件city-picker js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

jQuery省市区三级联动插件city-picker js代码

HTML代码(index.html):

<!doctype html>
<html lang="en">
<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>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/city-picker.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</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">Reset</button>
				<button class="btn btn-danger" id="destroy" type="button">Destroy</button>
			</div>
		</div>
	</form>
</div>
</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/city-picker.data.js"></script>
<script src="js/city-picker.js"></script>
<script src="js/main.js"></script>
</body>
</html>










JS代码(main.js):

$(function (){
	'use strict';
	var $citypicker1 = $('#city-picker1');
	$citypicker1.citypicker();
	var $citypicker2 = $('#city-picker2');
	$citypicker2.citypicker({
	province:'江苏省',city:'常州市',district:'溧阳市'}
);
	var $citypicker3 = $('#city-picker3');
	$('#reset').click(function (){
	$citypicker3.citypicker('reset');
}
);
	$('#destroy').click(function (){
	$citypicker3.citypicker('destroy');
}
);
	// //$('#distpicker1').distpicker();
	// //$('#distpicker2').distpicker({
	// province:'---- 所在省 ----',// city:'---- 所在市 ----',// district:'---- 所在区 ----' //}
);
	// //$('#distpicker3').distpicker({
	// province:'浙江省',// city:'杭州市',// district:'西湖区' //}
);
	// //$('#distpicker4').distpicker({
	// placeholder:false //}
);
	// //$('#distpicker5').distpicker({
	// autoSelect:false //}
);
}
);
	

CSS代码(main.css):

/* Basic style * -------------------------------------------------------------------------- */
/* Header */
.docs-header{margin-bottom:0;}
.navbar-toggle:hover,.navbar-toggle:focus{border-color:#337ab7;}
.navbar-toggle .icon-bar{background-color:#337ab7;}
/* Jumbotron */
.docs-jumbotron{background-color:#3f51b5;color:#fff;}
.docs-jumbotron .version{font-size:14px;color:#fff;filter:alpha(opacity=50);opacity:0.5;}
.docs-carbonads-container{position:relative;}
.docs-carbonads{max-width:350px;padding:15px;border:1px solid #ccc;border-radius:4px;overflow:hidden;}
.carbon-wrap{overflow:hidden;}
.carbon-img{clear:left;float:left;display:block;}
.carbon-text,.carbon-poweredby{display:block;margin-left:140px;}
.carbon-text,.carbon-text:hover,.carbon-text:focus{color:#fff;text-decoration:none;}
.carbon-poweredby,.carbon-poweredby:hover,.carbon-poweredby:focus{color:#ddd;text-decoration:none;}
@media (min-width:992px){.docs-carbonads{position:absolute;right:0;bottom:5px;}
}
/* Content */
.dropzone{padding:150px 15px;border:1px dashed #eee;background-color:#fcfcfc;text-align:center;}
.dropzone > input{display:inline-block;vertical-align:top;}
.logs{height:320px;padding:10px 15px;border:1px solid #eee;background-color:#fcfcfc;overflow-x:hidden;overflow-y:auto;}
.logs > p{margin-bottom:5px;color:#666;}
/* Footer */
.docs-footer{overflow:hidden;margin-bottom:300px;}
.hearts{position:relative;display:block;width:100%;height:30px;margin-top:20px;margin-bottom:20px;color:#ddd;font-size:18px;line-height:30px;text-align:center;}
.hearts:hover{color:#ff4136;}
.hearts:before{position:absolute;top:50%;right:0;left:0;display:block;height:0;border-top:1px solid #eee;content:" ";}
.hearts:after{position:relative;z-index:1;padding-left:8px;padding-right:8px;background-color:#fff;content:"♥";}
input{min-width:360px;}
/* Google Code Prettify * -------------------------------------------------------------------------- */
.prettyprint{margin-bottom:0;padding:15px !important;border:1px solid #ddd !important;}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
143.19 KB
jquery特效6
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章