Realize the second level linkage of jq on the registration page-JS Tutorial-php.cn

Realize the second level linkage of jq on the registration page

一个新手

Release： 2017-09-23 10:35:03

Original

1686 people have browsed it

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<style type="text/css">
.bigp {
	border: 1px solid red;
	width: 90%;
}
.logop {
	border: 1px solid red;
	width: 33%;
	float: left;
	height: 70px;
}
.clear {
	clear: both;
}
</style>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function(){
	var arrays=[
	   ["郑州","南阳","开封","商丘"],["南京","苏州","无锡","义乌"],["西安","咸阳","华山","长安"]
	];
	$("#privc").change(function(){
		$("#city").get(0).options.length=1;
		var val=this.value;
		/*$(arrays).each(function(i,n){
			if(i==val){
				$(n).each(function(j,m){
					$("#city").append("<option>"+m+"</option>");
				});
			}
		});
		} */
		$(arrays[val]).each(function(i,n){
			$("#city").append("<option>"+n+"</option>");
			});
	
	});
});
</script>
</head>
<body>
	<p class="bigp">
		<p>
			<p class="logop">
				<img src="image/0.png" width="100%" />
			</p>
			<p class="logop">
				<img src="image/1.png" width="100%" />
			</p>
			<p style="padding-top: 20px; height: 50px;">
				<a href="#">登陆</a>  <a href="注册.html">注册</a>  <a href="#">购物车</a>
			</p>
			<p class="clear"></p>
		</p>
		<p style="height: 500px; background-image: url(image/ad.png);">
			<p
				style="border: 2px solid blue; position: absolute; left: 300px; top: 200px; background-color: white;">
				<form action="主页2.html" method="post" >
					<table cellpadding=10px align="center">
						<tr>
							<td>用户名</td>
							<td><input type="text" name="name" id="usename"
								onfocus="tips(&#39;name&#39;,&#39;用户名由字母和数字组成&#39;)" onblur="check()"><span
								id="namespan"></span></td>
						</tr>
						<tr>
							<td>密码</td>
							<td><input type="password" name="password" id="password"
								onfocus="tips(&#39;password&#39;,&#39;密码由数字组成&#39;)"><span
								id="passwordspan"></span></td>
						</tr>
						<tr>
							<td>确认密码</td>
							<td><input type="text" name="repassword" id="repassword"
								onfocus="tips(&#39;repassword&#39;,&#39;密码由数字组成&#39;)"><span
								id="repasswordspan"></span></td>
						</tr>
						<tr>
							<td>邮箱</td>
							<td><input type="email" name="email" id="email"></td>
						</tr>
						<tr>
							<td>籍贯</td>
							<td><select  id="privc"  >
							        <option>--请选择--</option>
									<option value="0">河南省</option>
									<option value="1">江苏省</option>
									<option value="2">陕西省</option></select> 
								<select id="city"><option>--请选择--</option>
							</select></td>
						</tr>
						<tr>
							<td>爱好</td>
							<td><input type="checkbox" name="intest" value="">篮球<input
								type="checkbox" name="intest">羽毛球<input type="checkbox"
								name="intest">乒乓球</td>
						</tr>
						<tr>
							<td colspan="2" align="center"><input type="submit"
								value="注册"></td>

						</tr>
					</table>
				</form>
			</p>
		</p>
		<p style="width: 100%; border: 1px solid blue;">
			<img src="image/5.png" width="100%">
		</p>
		<p style="height: 30px; margin-top: 10px; border: 1px solid blue;">
			<center>
				<a href="">关于我们  </a> <a href="">联系我们 </a> <a href="">招贤纳士</a><a
					href=""> 友情链接</a>
			</center>
		</p>
	</p>
</body>
</html>

Copy after login

The above is the detailed content of Realize the second level linkage of jq on the registration page. For more information, please follow other related articles on the PHP Chinese website!