实现注册页面jq二级联动
- 一个新手原创
- 2017-09-23 10:35:031669浏览
<!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('name','用户名由字母和数字组成')" onblur="check()"><span
id="namespan"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password"
onfocus="tips('password','密码由数字组成')"><span
id="passwordspan"></span></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="text" name="repassword" id="repassword"
onfocus="tips('repassword','密码由数字组成')"><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>以上是实现注册页面jq二级联动的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn