Home > Article > Web Front-end > Realize the second level linkage of jq on the registration page

Realize the second level linkage of jq on the registration page

一个新手Original: 2017-09-23 10:35:031651browse

<!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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS animation implementation methodNext article：JS animation implementation method

See more

Realize the second level linkage of jq on the registration page

Related articles