省市二级联动案例
案例分析：
1.创建一个二维数组,存储省份对应的城市
2.给省份的select标签添加一个onchange事件(内容改变就会触发),传递参数(this.value)
3.定义一个onchange事件的响应函数
4.获取城市select标签对象
5.清空城市select标签中的option
6.使用函数传递过来的参数value值去数组中找到省份对应的城市数组
7.遍历城市数组,获取每一个城市名称
8.创建option标签对象,给option标签对象添加标签体(城市名称)
9.使用城市select标签对象中的方法appendChild(option标签对象)
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<style type="text/css">
.regist_bg{
background: url(img/regist_bg.jpg) repeat-x ;
width: 100%;
height: 600px;
padding-top: 40px;
}
.regist{
border: 7px solid #ccc;
width: 800px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
}
input[type="submit"]{
background-image: url(img/register.gif);
width: 100px;
height: 35px;
color: #fff;
cursor: pointer;
}
</style>
<script type="text/javascript">
//1.创建一个二维数组,存储省份对应的城市
var citys = [
["昌平区","海淀区","朝阳区"],//0 option标签的value值 北京 0
["深圳市","东莞市","广州市"],//1 option标签的value值 广东1
["石家庄市","张家口市","承德市"]//2 option标签的value值 河北2
];
//3.定义一个onchange事件的响应函数
function selectCity(value){
//alert(value); //0,1,2就是存储城市二维数组的索引
//alert(citys[value]);
//4.获取城市select标签对象
var cityIdEle = document.getElementById("cityId");
//5.清空城市select标签中的option
cityIdEle.innerHTML = "<option value=''>----请-选-择-市----</option>";
//6.使用函数传递过来的参数value值去数组中找到省份对应的城市数组
var cityArr = citys[value];
//7.遍历城市数组,获取每一个城市名称
for(var i=0; i<cityArr.length; i++){
var cityName = cityArr[i];
//8.创建option标签对象,给option标签对象添加标签体(城市名称)
var optEle = document.createElement("option");//<option></option>
optEle.innerHTML = cityName;
//9.使用城市select标签对象中的方法appendChild(option标签对象)
cityIdEle.appendChild(optEle);
}
}
</script>
</head>
<body>
<div class="regist_bg" >
<div class="regist">
<form action="../index.html" >
<table width="600" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input id="loginnameId" type="text"
name="loginname" size="60"/> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="loginpwdId" type="password"
name="loginpwd" size="60"/> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="reloginpwdId" type="password"
name="reloginpwd" size="60"/> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text" name="email"
size="60"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="60"/>
</td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="gender" value="男"
checked="checked" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td colspan="2"><input type="text" name="birthday" size="60"/>
</td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<!--
2.给省份的select标签添加一个onchange事件(内容改变就会触发),
传递参数(this.value)
this.value就是选中的option标签的value的属性值(0,1,2)
-->
<select id="provinceId" style="width:150px"
onchange="selectCity(this.value)">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">广东省</option>
<option value="2">河北省</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" name="verifyCode" /> </td>
<td><img src="img/checkcode.jpg" /> </td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>