JS完成注册页面的省市联动（JS内置对象全局函数，select标签操作）

来源：互联网发布：武汉工程大学知乎编辑：程序博客网时间：2024/05/17 23:07
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>注册</title><script type="text/javascript">function tips(){document.getElementById("usernamespan").innerHTML="<font color='red'>用户名是应该字母</font>";}function checkusername(){document.getElementById("usernamespan").innerHTML="<font color='green'>用户名是正确</font>";}function checkform(){var username=document.getElementById("inputusername").value;if(username==""){window.alert(username);document.getElementById("usernamespan").innerHTML="<font color='green'>用户名是空</font>";return false;}else{document.getElementById("usernamespan").innerHTML="<font color='green'>注册成功</font>";return true;}}var arr=new Array(4);arr[0]=new Array("西安","咸陽");arr[1]=new Array("鄭州","商丘");arr[2]=new Array("石家莊","唐山");arr[3]=new Array("昆明","麗江");function changecity(value){var city=document.getElementById("city");for(var i=city.options.length;i>0;i--){city.options[i]=null;}for(var i=0;i<arr.length;i++){if(i==value){for(var j=0;j<arr[i].length;j++){var opt=document.createElement("option");var citytext=document.createTextNode(arr[i][j]);opt.appendChild(citytext);city.appendChild(opt);}}}}</script><style type="text/css" contenteditable="inherit">div {border: 1px solid blue;width: 100%;}#bodydiv {width: 90% px;}.logodiv {border: solid 1px blue;width: 33%;float: left;height: 48px;}.clear {clear: both;}.cd {background-color: black;height: 30px;}</style></head><body><div id="bodydiv"><div class="logodiv"><img alt="" src="../imag/head1.png" height=100%></div><div class="logodiv"><img alt="" src="../imag/head2.png" height=100%></div><div class="logodiv"style="padding-top: 5px; text-align: center; height: 43px"align="center"><a href="#">登陆</a> <a href="zhuce.html">注册</a> <a href="#">购物车</a></div><div class="clear"></div><div class="cd"><a href="shouyediv.html">首页</a> <a href="#">手机数码</a> <a href="#">电脑办公</a><a href="#">研烟酒箱包</a></div><divstyle="height: 800px; background-image: url('../imag/zhuce.jpg'); background-size: 100% 100%;"><divstyle=" border: 1px red solid; height:90%;position: absolute;top: 300px;"align="left"><form method="post" action="zhucediv.html"onsubmit=" return checkform()"><table align="center" border="1" width=50%><tr><td align="right" width=50%>用户名    <td align="left"><input type="text" name="username" value=""onfocus="tips()" onblur="checkusername()" id=inputusername></input><spanid="usernamespan"></span></td></tr><tr><td align="right" width=50%>密码    <td align="left"><input type="password" name="password"onfocus="tips()"></input><span id="passwordspan"></span></td></tr><tr><td align="right" width=50%>确认密码    <td align="left"><input type="password" name="repassword"></input><spanid="repassword"></span></td></tr><tr><td align="right" width=50%>邮箱    <td align="left"><input type="text" name="email"></input></td></tr><tr><td align="right" width=50%>性别    <td align="left"><input type="radio" name="sex" value="man"checked="checked">男<input type="radio" name="sex"value="woman">女</td></tr><tr><td align="right" width=50%>生日    <td align="left"><input type="date" name="birth"></td></tr><tr><td align="right" width=50%>爱好    <td align="left"><input type="checkbox" name="love"value="1">看电视<input type="checkbox" name="love"value="2">打游戏<input type="checkbox" name="love"value="3">吃饭<input type="checkbox" name="love" value="4"checked>睡觉</td></tr><tr><td align="right" width=50%>籍贯    <td align="left"><select name="pro"onchange="changecity(this.value)"><option>--请选择--<option value="0">陕西<option value="1">河南<option value="2">河北<option value="3">云南</select> <select name="city" id="city"><option>--请选择--</select><tr><td align="right" width=50%>头像    <td align="left"><input type="file"></td></tr><tr><td align="right" width=50%>个人简介    <td align="left"><textarea cols="" rows="5" name="a">我是一个</textarea></td></tr><tr><td colspan="2" align="center"><input type="submit"value="注册"><input type="reset" value="重置"></td></tr></table></form></div></div><div><img alt="" src="../imag/q.png" width="100%"></div><div style="text-align: center;"><a href="html.html">关于我们</a>  公司简介  招贤纳士  广告服务  联系方式  合作伙伴  论坛反馈<br>版权声明：Copyright© 1999-2016,赵瑾的网站 , All Rights Reserved</div></div></body></html>
data
math
阅读全文
0 0