用户注册页面<城市级联>

<html>
<head>
<title></title>
<script language="javascript" src="js/Calendar.js"></script>
<script language="javascript" type="text/javascript">
	var c = new Calendar("c");
	document.write(c);


	var province=new Array();
	province[0]="北京";province[1]="上海";province[2]="广东";province[3]="深圳";
	province[4]="重庆";province[5]="天津";province[6]="山西";
	province[7]="内蒙古";province[8]="辽宁";province[9]="吉林";province[10]="江苏";
	province[11]="浙江";	province[12]="安徽";province[13]="黑龙江";province[14]="福建";
 	province[15]="江西";province[16]="山东";province[17]="河南";province[18]="湖北";
 	province[19]="湖南";province[20]="广西";province[21]="海南";province[22]="四川";
 	province[23]="贵州";province[24]="云南";province[25]="西藏";province[26]="陕西";
 	province[27]="甘肃";province[28]="青海";province[29]="宁夏";province[30]="新疆";
	province[31]="香港";province[32]="澳门";	province[33]="台湾";
	
	var city =new Array();


	city[0]=new Array('东城区','西城区','崇文区','宣武区','朝阳区','海淀区','丰台区','石景山');
	city[1]=new Array('宝山','金山','南市','长宁','静安','青浦','崇明','卢湾','松江','奉贤','浦东','杨浦','虹口','普陀','闸北','黄浦','闵行','徐汇','嘉定','南汇');
	city[2]=new Array('广州','珠海','中山','佛山','东莞','清远','肇庆','阳江','湛江','韶关','惠州','河源','汕尾','汕头','梅州');
	city[3]=new Array('罗湖','福田','南山','盐田','宝安','龙岗');
	city[4]=new Array('渝中','江北','沙坪坝','南岸','九龙坡','大渡口');
	city[5]=new Array('和平','河北','河西','河东','南开','红桥','塘沽','汉沽','大港','东丽','西青','津南','北辰','武清','滨海');
	city[6]=new Array('太原','大同','阳泉','朔州','长治','临汾','晋城');
	city[7]=new Array('呼和浩特','包头','乌海','临河','东胜','集宁','锡林浩特','通辽','赤峰','海拉尔','乌兰浩特');
	city[8]=new Array('沈阳','大连','鞍山','锦州','丹东','盘锦','铁岭','抚顺','营口','辽阳','阜新','本溪','朝阳','葫芦岛');
	city[9]=new Array('长春','吉林','四平','辽源','通化','白山','松原','白城','延边');
	city[10]=new Array('南京','苏州','无锡','常州','镇江','连云港 ','扬州','徐州 ','南通','盐城','淮阴','泰州','宿迁');
	city[11]=new Array('杭州','湖州','丽水','温州','绍兴','舟山','嘉兴','金华','台州','衢州','宁波');
	city[12]=new Array('合肥 ','芜湖 ','蚌埠 ','滁州 ','安庆 ','六安 ','黄山 ','宣城 ','淮南 ','宿州 ','马鞍山 ','铜陵','淮北 ','阜阳 ','池州 ','巢湖 ','亳州');
	city[13]=new Array('哈尔滨','齐齐哈尔','牡丹江','佳木斯','大庆','伊春','黑河','鸡西','鹤岗','双鸭山','七台河','绥化','大兴安岭');
	city[14]=new Array('福州 ','厦门 ','泉州 ','漳州 ','龙岩 ','南平 ','宁德 ','莆田 ','三明');
	city[15]=new Array('南昌','景德镇','九江','萍乡','新余','鹰潭','赣州','宜春','吉安','上饶','抚州');
	city[16]=new Array('济南','青岛','淄博','德州','烟台','潍坊','济宁','泰安','临沂','菏泽','威海','枣庄','日照','莱芜','聊城','滨州','东营');
	city[17]=new Array('郑州','开封','洛阳','平顶山','安阳','鹤壁','新乡','焦作','濮阳','许昌','漯河','三门峡','南阳','商丘','周口','驻马店','信阳','济源');
	city[18]=new Array('武汉','黄石','十堰','荆州','宜昌','襄樊','鄂州','荆门','孝感','黄冈','咸宁','恩施','随州','仙桃','天门','潜江','神农架');
	city[19]=new Array('长沙','株州','湘潭','衡阳','邵阳','岳阳','常德','郴州','益阳','永州','怀化','娄底','湘西 ');
	city[20]=new Array('南宁','柳州','桂林','梧州','北海','防城港','钦州','贵港','玉林','贺州','百色','河池');
	city[21]=new Array('海口 ','三亚','通什','琼海','琼山','文昌','万宁','东方','儋州');
	city[22]=new Array('成都','自贡','攀枝花','泸州','德阳','绵阳','广元','遂宁','内江','乐山','南充 ','宜宾','广安','达川','巴中','雅安','眉山 ','阿坝 ','甘孜 ','凉山 ');
	city[23]=new Array('贵阳 ','六盘水','遵义','铜仁','毕节','安顺','黔西南 ','黔东南','黔南');
	city[24]=new Array('昆明','东川','曲靖','玉溪','昭通','思茅','临沧','保山','丽江','文山 ','红河 ','西双版纳 ','楚雄 ','大理 ','德宏 ','怒江','迪庆');
	city[25]=new Array('拉萨','那曲','昌都','山南','日喀则','阿里','林芝');
	city[26]=new Array('西安','铜川','宝鸡','咸阳','渭南','延安','汉中','榆林','商洛','安康');
	city[27]=new Array('兰州','金昌','白银','天水','嘉峪关','定西','平凉','庆阳','陇南','武威','张掖','酒泉','甘南 ','临夏');
	city[28]=new Array('西宁','海东',' 海北 ','黄南','海南','果洛','玉树','海西');
	city[29]=new Array('银川','石嘴山','银南','固原');
	city[30]=new Array('乌鲁木齐','克拉玛依','石河子','吐鲁番','哈密','和田','阿克苏','喀什','克孜勒苏','巴音郭楞','昌吉','博尔塔拉','伊犁');
	city[31]=new Array();
	city[32]=new Array();
	city[33]=new Array();
	function changecity()
	{
		var province=document.getElementById("pro");
		var citys=document.getElementById("city");
		var provalue=province.options[province.selectedIndex].value;
		citys.options.length=0
		if(provalue==-1){
			citys.options[citys.options.length]=new Option("城市","-1");
			
		}
		else
			{
		for(var i=0;i<city[provalue].length;i++)
		{
			var text=city[provalue][i];
			var value=i;
			citys.options[citys.options.length]=new Option(text,value);
		}	
			}


		
	}
	
	
	</script>
	<script language="javascript" type="text/javascript">
	function agree(){
		if(document.getElementById('cm').checked)
			document.getElementById('zc').disabled=false;
		else
			document.getElementById('zc').disabled=true;


	}
//  	function valiate(){
//  		var zz1="^[A-Za-z0-9]{6,30}$";
//  		var zz2="^(\\d{14}|\\d{17})(\\d|[xX])$";
// 		var username=document.getElementById("username").value;
// 		var passwd=document.getElementById("passwd").value;
// 		var passwd2=document.getElementById("secondp").value;
// 		var realname=document.getElementById("rname").value;
// 		var province=document.getElementById("pro").value;
// 		var city=document.getElementById("city").value;
// 		var id=document.getElementById("number").value;
// 		var birth=document.getElementById("birthday").value;
// 		var error="";
// 		//用户名
// 		if(username==""|| username==null )
// 		 {
// 		 error=error+"用户名不能为空!";
// 		 error=error+"\n";
// 		}else if(!(username.match(zz1)))
//  			{
// 				error=error+"用户名格式输入不正确,请重新输入!";
// 			 	error=error+"\n";
//  			}
// 		//密码
// 		if(passwd==""|| passwd==null)
// 		 {
// 		 error=error+"密码不能为空!";
// 		 error=error+"\n";
// 		 }else if(passwd.length<6)
// 			 {
// 			 error=error+"密码不能小于六位!";
// 			 error=error+"\n";
// 			 }
// 		if(passwd2 != passwd)
// 			 {
// 			 error=error+"密码不匹配";
// 			 error=error+"\n";
// 			 }
// 		//真实名字
// 		if(realname="" || realname==null)
// 		{
// 				 error=error+"真实名字不能为空!";
// 				 error=error+"\n";
// 				 }
// 		//城市
// 		if(province==-1)
// 		{
// 				 error=error+"省份不能为空!";
// 				 error=error+"\n";
// 				 }
// 		if(city==-1)
// 		{
// 				 error=error+"城市不能为空!";
// 				 error=error+"\n";
// 				 }
// 		//身份证号码
// 		if(id=="" || id===null)
// 		{
// 				 error=error+"证件号不能为空!";
// 				 error=error+"\n";
// 				 }else if(id==1){
// 					 if(!(id.match(zz2)))
// 					 {
// 					 error=error+("证件号格式输入不正确,请重新输入!");
// 					 error=error+"\n";
// 					 }
// 				 }
// 		//出生年月
// 		 if(birth=="" || birth==null)
// 		{
// 				 error=error+"出生日期不能为空!";
// 				error=error+"\n";
// 				}
// 		if(error=="")
// 			{
// 				document.forms[0].submit();
// 				//window.location.href="dl.html";
// 			//	return true;
// 			}else
// 				{
// 					alert(error);
// 				//	return false;
// 				}
		
// 	}
 		
			
	</script>
</head>
<body  background="images\user.jpg"  >




<form action="registerServlet" method="post" name=form1>
<center>
用户注册信息
<table>


<tr><td colspan="2">注:标有<font color="red">*</font>处,均为必填项</td></tr>
<tr ><td colspan="2">登录信息:</td>
<td>  </td>
<td></td>
</tr>
<tr>
	<td><font color="red" >*  </font>登录名:</td>
	<td ><input type="text"  name="Username" id="username">由字母、数字或“__”组成,长度不少于6位,不多于30位</td>
	</tr>
<tr>
	<td><font color="red">*  </font>密码:</td>
	<td ><input type="password" name="passwd" id="passwd">不少于6位字符</td>
	</tr>
<tr>
	<td><font color="red">*  </font>确认密码:</td>
	<td ><input type="password" name="secondp" id="secondp">请再次输入密码</td>
	</tr>
<tr><td >详细信息:</td></tr>
<tr>
<td><font color="red">*  </font>真实姓名:</td>
	<td ><input type="text" name="rname" id="rname"></td>
	
	</tr>
<tr>
	<td><font color="red">*  </font>性别:   </td>
	<td ><input type="radio" name="sex" checked="checked" value="男">男
	<input type="radio" name="sex" value="女" >女</td>
	<td>  </td>
	</tr>
	
<tr>
	<td><font color="red">*  </font>省份:</td>
	<td >
	<select id="pro" name="pro" onChange="changecity()">
	<option value="-1" >省份</option>
	<script language="javascript" type="text/javascript">
	for(var i=0;i<province.length;i++)
		{
			document.write("<option value="+i+">"+province[i]+"</option>");
		}
	</script>
	</select>
	城市:
	<select id="city" name="city">
	<option value="-1" >市县</option>
	</select>
	</td>
	</tr>
<tr>
<td><font color="red">*  </font>证件类型:</td>
	<td>
	<select name="certype">
	<option value="1">二代身份证</option>
	<option value="2">港澳通行证</option>
	<option value="3">军人证</option>
	</select>
	<td>  </td>
	</tr>


<tr>
<td><font color="red">*  </font>证件号码:</td>
	<td ><input type="text" name="certnumber" id="number"></td>
	</tr>
<tr>
<td ><font color="red">*  </font>出生日期:</td>
	<td ><input type="text" name="birthday" id="birthday" οnfοcus="c.show(this)" ></td>
	</tr>
<tr>
	<td >   旅客类型:</td>
	<td ><select name="usertype" style="width:150px;">
	<option value="1">成人</option>
	<option value="2">学生</option>
	<option value="3">儿童</option>
	<option value="4">伤残军人</option>
	<option value="5">伤残人民警察</option>
	</select></td>
</tr>
<tr>
	<td >   备注</td>
	<td ><textarea name="content" rows="8" cols="20"></textarea></td>
</tr>
<tr>
	<td>  </td>
	<td><input type="checkbox" value="2" οnclick="agree()" id="cm">
	我已阅读并同意遵守<font color="blue"><a href="http://localhost:8080/test/command.html"><u>《中国铁路客户服务中心网站服务条款》</u></a></font></td>
</tr>
<tr>
<td>  </td>
<td>   <input type="submit" id="zc"  value="注册" disabled="disabled">
<!-- <td>   <input type="button" id="zc"  value="注册" disabled="disabled" οnclick="location.href='http://localhost:8080/test/dl.html'" -->
                  <input type="reset" name="wc" value="重置" ></td>
</tr>
</table>


</center>
</form>


</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过Ajax实现省份和城市之间的级联选择。当选择省份时,通过Ajax请求后台获取该省份对应的城市信息,然后更新城市选择框的选项。 具体做法是,在省份选择框的change事件中,发送Ajax请求到后台获取城市信息,并将城市信息更新到城市选择框中。以下是一个示例代码: HTML代码: ``` <select name="selectProvince" id="selectProvince"> <option selected>请选择省份</option> <option th:each="selectProvince:${session.selecProvince}" th:value="${selectProvince.province_id}" th:text="${selectProvince.province}"></option> </select> <select name="selectCity" id="selectCity"> <option selected>选择城市</option> </select> ``` JavaScript代码: ``` $(document).ready(function() { // 省份选择框的change事件 $("#selectProvince").change(function() { // 获取选中的省份ID var provinceId = $(this).val(); // 发送Ajax请求获取城市信息 $.ajax({ url: "/getCity", type: "GET", dataType: "json", data: {provinceId: provinceId}, success: function(data) { // 清空城市选择框的选项 $("#selectCity").empty(); // 添加城市选项 $.each(data, function(index, city) { $("#selectCity").append('<option value="' + city.city_id + '">' + city.city + '</option>'); }); } }); }); }); ``` 在后台Controller中,可以根据省份ID查询对应的城市信息,并将城市信息以json格式返回给前端。以下是一个示例代码: ``` @GetMapping("/getCity") @ResponseBody public List<City> getCity(@RequestParam("provinceId") int provinceId) { List<City> cityList = cityService.getCityByProvince(provinceId); return cityList; } ``` 这样,在选择省份后,城市选择框的选项会自动更新,无需刷新页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值