JQuery城市选择
2024-08-30 14:50:48
<!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>
最新文章
- sql 代码调试
- 使用python发送和接收邮件
- Ubuntu16.04下部署golang开发环境
- Activity生命周期（一） 暨 帮助文档的使用
- jira汉化，破解，升级
- jQuery API中文文档
- Spring AOP中级——应用场景
- details和summary可以对内容进行折叠
- 通过 Azure Pipelines 实现持续集成之docker容器化及自动化部署
- 01-Redhat/Centos7网卡命名介绍及修改方式
- C# MessageBox自动关闭
- storm问题汇总
- flask的基础认识
- 20165231 2017-2018-2 《Java程序设计》第9周学习总结
- bootstrap图片轮播
- web前端3.0时代，“程序猿”如何“渡劫升仙”？
- Java中的equals和==的差别 以及Java中等价性和同一性的讨论
- 【Canal源码分析】数据传输协议
- BCompare破解方法
- PHP——大话PHP设计模式——链式操作