就不多说，直接上效果图和代码，该网页所需要的图片放下面了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>实现省市级联效果</title> <style type="text/css"> body{ margin:0; padding:0; font-size:12px; line-height:20px; } .main{ width:528px; margin-left:auto; margin-right:auto; } .center{ border:solid 5px #ffa3ba; border-bottom:0; padding-top:10px; } .left{ text-align:right; width:100px; height:25px; padding-right:5px; } .red{ color:#cc0000; font-weight:bold; } .inputs{ width:130px; height:16px; border:solid 1px #666666; float:left; margin-right:5px; } .prompt{ margin-left:10px; color:#F00; } </style> <script type="text/javascript"> /*验证登录名*/ function checkLoginName(){ var loginName=document.getElementById("loginName").value; var LoginNameId=document.getElementById("login_prompt"); LoginNameId.innerHTML=""; var regLoginName=/^[\u4e00-\u9fa5\w]+$/; if(regLoginName.test(loginName)==false){ LoginNameId.innerHTML="登录名只能是中文字符、英文字母、数字及下划线"; return false; } return true; } /*验证身份证号码*/ function checkMycard(){ var mycard=document.getElementById("mycard").value; var mycardId=document.getElementById("mycard_prompt"); mycardId.innerHTML=""; var regMycard=/^\d{15}$|^\d{18}$/; if(regMycard.test(mycard)==false){ mycardId.innerHTML="身份证号码只能由15或18位的数字组成"; return false; } return true; } /*验证固定电话*/ function checkPhoto(){ var photo=document.getElementById("photo").value; var photo_prompt=document.getElementById("photo_prompt"); photo_prompt.innerHTML=""; var reg=/^\d{3,4}-\d{7,8}$/; if(reg.test(photo)==false){ photo_prompt.innerHTML="固定电话不正确，例如010-54845216"; return false; } return true; } /*验证邮箱*/ function checkEmail(){ var email=document.getElementById("email").value; var email_prompt=document.getElementById("email_prompt"); email_prompt.innerHTML=""; var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; if(reg.test(email)==false){ email_prompt.innerHTML="Email格式不正确，例如web@126.com"; return false; } return true; } </script> </head> <body> <table class="main" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/top.gif"/></td> </tr> <form action="success.html" method="post" name="myform"> <tr> <td class="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="left"><img src="images/pic001.gif" /></td> <td class="red"><img src="images/pic002.gif" style="vertical-align:bottom;"/> 欢迎您申请 SOHO联名信用卡 </td> </tr> <tr> <td class="left">登录名：</td> <td><input id="loginName" type="text" class="inputs" onblur="checkLoginName()" /><div id="login_prompt" class="prompt"></div></td> </tr> <tr> <td class="left">登录密码：</td> <td><input id="pwd" type="password" class="inputs" /><div id="pwd_prompt" class="prompt"></div></td> </tr> <tr> <td class="left">确认密码：</td> <td><input id="repwd" type="password" class="inputs" /><div id="repwd_prompt" class="prompt"></div></td> </tr> <tr> <td class="left">身份证号码：</td> <td><input id="mycard" type="text" class="inputs" onblur="checkMycard()" /><div id="mycard_prompt" class="prompt"></div></td> </tr> <tr> <td class="left">固定电话：</td> <td><input id="photo" type="text" class="inputs" onblur="checkPhoto()" /><div id="photo_prompt" class="prompt"></div></td> </tr> <tr> <td class="left">手机号码：</td> <td><input id="mobile" type="text" class="inputs" /><div id="mobile_prompt" class="prompt"></div></td> </tr> <tr> <td class="left">电子邮件：</td> <td><input id="email" type="text" class="inputs" onblur="checkEmail()" /><div id="email_prompt" class="prompt"></div></td> </tr> <tr> <td class="left">现居住地：</td> <td> <select id="selProvince" onchange="changeCity( )" style="width:100px"> <option>--选择省份--</option> </select> <select id="selCity" style="width:100px"> <option>--选择城市--</option></select></td> </tr> <tr> <td class="left"> </td> <td><input id="btn" type="image" src="images/pic-sb.jpg" /></td> </tr> </table> </td> </tr> </form> <tr> <td><img src="images/bottom.jpg"/></td> </tr> </table> <script type="text/javascript"> var cityList = new Array(); cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山']; cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区']; cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']; cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边']; cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区']; cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区']; cityList['江苏省'] = ['南京市','苏州市','无锡市']; cityList['浙江省'] = ['杭州市','宁波市','温州市']; cityList['四川省'] = ['四川省','成都市']; cityList['海南省'] = ['海口市']; cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市']; cityList['山东省'] = ['济南市','青岛市','烟台市']; cityList['江西省'] = ['江西省','南昌市']; cityList['广西省'] = ['柳州市','南宁市']; cityList['安徽省'] = ['安徽省','合肥市']; cityList['河北省'] = ['邯郸市','石家庄市']; cityList['河南省'] = ['郑州市','洛阳市']; cityList['湖北省'] = ['武汉市','宜昌市']; cityList['湖南省'] = ['湖南省','长沙市']; cityList['陕西省'] = ['陕西省','西安市']; cityList['山西省'] = ['山西省','太原市']; cityList['黑龙江省'] = ['黑龙江省','哈尔滨市']; cityList['其他'] = ['其他']; function changeCity(){ var province=document.getElementById("selProvince").value; var city=document.getElementById("selCity"); city.options.length=0; //清除当前city中的选项 for (var i in cityList){ if (i == province){ for (var j in cityList[i]){ city.add(new Option(cityList[i][j],cityList[i][j]),null); } } } } function allCity(){ var province=document.getElementById("selProvince"); for (var i in cityList){ province.add(new Option(i, i),null); } } window.onload=allCity; </script> </body> </html>
