<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市列表联动</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> function showTips(id,info){ document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>" } //onblur="check('user','用户名不能为空')" function check(id,info){ var el = document.getElementById(id).value; //校验 if(el==""){ document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>" }else{ document.getElementById(id+"span").innerHTML=""; } } </script> <script> var arr=[["武汉","黄冈","襄阳","雷军"],["长沙","韶山","岳阳楼","张家界"],[],[]]; //0 1 2 3 $(function(){ //1 创建数组保存对应的城市 var city = new Array(3); city[0]=new Array("武汉","黄冈","襄阳","雷军"); city[1]=new Array("长沙","韶山","岳阳楼","张家界"); city[2]=new Array("石家庄","唐山","保定市","廊坊市"); city[3]=new Array("商丘","信阳","洛阳","安阳"); $("#province").change(function(){ $("#city").empty(); var val = this.value; console.log(val); //1 遍历二维数组的省份和 城市 $.each(city, function(i,n) { //alert(n); if(val==i){ //2 遍历对应的城市 $.each(city[i], function(j,m){ //alert(m); //3 创建文本 var txt = document.createTextNode(m); //4 创建标记 var op =document.createElement("option"); //5 将文本放进option中 $(op).append(txt); //6 将标记放进select $(op).appendTo("#city"); }); } }); }); }); </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--嵌套一个一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.jpg" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px" /> </td> <td width="33.3%"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </td> </tr> </table> </td> </tr> <!--2.导航栏部分--> <tr height="50px"> <td bgcolor="black"> <a href="#"> <font size="5" color="white">首页</font> </a> <a href="#"> <font color="white">手机数码</font> </a> <a href="#"> <font color="white">电脑办公</font> </a> <a href="#"> <font color="white">鞋靴箱包</font> </a> <a href="#"> <font color="white">家用电器</font> </a> </td> </tr> <!--3.注册表单--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--嵌套一个十行二列的表格--> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">会员注册</font> USER REGISTER </td> </tr> <tr> <td width="80px"> 用户名 </td> <td> <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填')" onblur="check('user','用户名不能为空')"/><span id="userspan"></span> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码名必填')" onblur="check('password','密码不能为空')" /><span id="passwordspan"></span> </td> </tr> <tr> <td> 确认密码 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil"/> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px"/> </td> </tr> <tr> <td>籍贯</td> <td> <select id="province"> <option>===请选择===</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px"/> </td> </tr> <tr> <td> 验证码 </td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </td> </tr> <!--4.广告图片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情链接和版权信息--> <tr> <td align="center"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <p> Copyright © 2016-2018 xx商城 版权所有 </p> </td> </tr> </table> </body> </html>