jQuery手机端城市三级联动代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机端城市三级联动代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery手机端城市三级联动代码</title>
<link href="css/demo.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js"></script>
<script src="layer/layer.js"></script>
<script src="js/demo.js"></script>
<script src="js/jquery.cityselect.js"></script>
<script>
	$(document).ready(function() {
		 $("#city").citySelect({
				prov: "湖南",
				city: "长沙",
				dist: "雨花区",
				nodata: "none"
			});
		
	});
	$(function  () {
//获取短信验证码
var validCode=true;
$(".msgs").click (function  () {
	var time=60;
	var code=$(this);
	console.log($(this))
	if (validCode) {
		console.log(validCode)
		validCode=false;
		code.addClass("msgs1");
	var t=setInterval(function  () {
		time--;
		code.html(time+"秒");
		if (time==0) {
			clearInterval(t);
		code.html("重新获取");
			validCode=true;
		code.removeClass("msgs1");

		}
	},1000)
	}
})
})
   $(function(){
	   $("#txtPhone").on("change",function(){
		   var phone=$("#txtPhone").attr("data-mobile");
		   var mobile=$("#txtPhone").val()
		  console.log(phone)
		   console.log(mobile)
		   if(phone==""||phone!=mobile){
			   $(".regitem-mesage").show()
			   };
		   }); 
	   })
 </script>
</head>
<body>
  <div id="dreg">
	<div class="regitem-title">
		 <div class="regtext-title"><h2>信息填写</h2></div>
	</div>
	<div class="regitem">
				<span>姓名</span>
		<input type="text" id="name" name="name" value="姓名">
	</div>
	<div class="regitem">
		<span>联系电话</span>
		<input type="text" id="txtPhone" name="txtPhone" data-mobile="13800138000" value="13800138000">
	</div>
	
	<div class="regitem-mesage">
	   <span></span>
	   <input type="text" id="mesage" name="mesage" value="获取验证码">
	   <span class="msgs">获取验证码</span>
	</div>

	<div class="regitem">
		<span>选择地址</span>
		<div id="city">  
		  <select class="prov"></select>   
		  <select class="city" disabled="disabled"></select>  
		  <select class="dist" disabled="disabled"></select>  
		</div>
	</div>
	<div class="regitem">
		<span class="regitem-detail">详细地址</span>
		<textarea id="txtarea" name="txtarea" placeholder="请输入你的详细地址">请输入你的详细地址</textarea>
	</div>
	<div class="regitem-but">
		<div class="dregbtn"><a href="javascript:;">确定</a></div>
	</div>
</div>
</body>
</html>

JS代码(demo.js):

/// <reference path="jquery-1.10.2.min.js" />$(function (){
	$(".regitem input").blur(function (){
	var id = $(this).attr("id");
	//获取到了当前鼠标离开的那个文本框 Check(id);
}
);
	$(".dregbtn a").click(function (){
	Check("txtPhone");
	Check("name");
	Check("txtarea");
	Check("mesage");
}
);
}
);
	function Check(id){
	var regStr = "";
	var sResult = "";
	var txt = $.trim($("#" + id).val());
	if (txt == ""){
	sResult = "各项不能为空";
	layer.tips(sResult,"#" + id,{
	tips:[2,'#78BA32']}
);
}
else{
	switch (id){
	case "name":regStr = /[\u4E00-\u9FA5]{
	2,4}
/;
	break;
	case "txtPhone":regStr = /0?(13|14|15|18)[0-9]{
	9}
/;
	break;
}
if (regStr && regStr.test && !regStr.test(txt)){
	sResult = "输入的内容格式不对";
	layer.tips(sResult,"#" + id,{
	tips:[2,'#78BA32']}
);
}
}
}

CSS代码(demo.css):

*{padding:0px;margin:0px;font-family:"微软雅黑";font-size:.15rem}
html{font-size:31.25vw;}
.regitem-title{height:150px;line-height:150px;text-align:center}
#dreg{margin:0 auto;opacity:0.7}
a{text-decoration:none;}
.regitem{height:.45rem;margin-top:10px;}
.regitem-tet span{width:1rem;display:inline-block;}
.regitem-mesage{height:.4rem;margin-top:10px;}
.regitem-mesage span:first-child{width:1rem;display:inline-block;}
.regitem-mesage input{width:.85rem;border-radius:5px}
.regitem-tet{margin-top:10px}
.regitem span{width:1rem;display:inline-block;text-align:right;}
.regitem input{border-radius:5px}
#city{display:inline}
#city select{border-radius:3px}
.regitem-detail{position:relative;bottom:.26rem;}
#txtarea{border-radius:3px;width:1.65rem;}
.regitem-mesage{font-size:.12rem;display:none;}
.dregbtn{text-align:center;}
.regitem-but{margin-top:30px}
.dregbtn a{display:inline-block;height:.3rem;width:1.1rem;background-color:#0089c8;color:#FFFFFF;border-radius:5px;line-height:.3rem;}
.msgs{color:#fff;border:1px solid #0697DA;text-align:center;background:#0697DA;cursor:pointer;border-radius:5px;font-size:.13rem;}
form .msgs1{background:#E6E6E6;color:#818080;border:1px solid #CCCCCC;border-radius:5px;}

附件:下载该文件资源,减少时间成本(增值服务)