需求:有两个下拉列表，一个下拉列表为省份，还有一个列表为空，当你选择第一个下拉列表的时候，动态在下一个下拉列表添加城市？
解决方案：可以给第一个下拉列表绑定事件，js的事件为onchange，jq的为change,当你在第一个下拉列表选择省份时，自动添加城市！
js代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js省级联动</title>
<style>
.top1{
border: 1px solid blue;
width: 32.9%;
height: 51px;
float: left;
}
a{
text-decoration: none;
}
#clear{
clear: both;
}
#menu{
border: 1px solid green;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#container{
border: 1px solid red;
width: 99%;
height: 600px;
background: url(img/regist_bg.jpg);
position: relative;
}
#content{
border: 1px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
}
#bottom{
text-align: center;
}
</style>
<script>
//创建二维数组
var cities = new Array(1);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function check(){
//8.获取第二个下拉列表，并且令第二个下拉列表长度为0
var City = document.getElementById("city");
City.options.length="0";
//1.获取第一个下拉列表的值
var val = document.getElementById("province").value;
//23遍历动态添加城市
for(var i=0;i<cities.length;i++){
if(val==i){
for(var j=0;j<cities[i].length;j++){
//3.创建文本节点
var textNode = document.createTextNode(cities[i][j]);
//5.创建元素节点
var Ele = document.createElement("option");
//6.添加文本节点
Ele.appendChild(textNode);
//7.添加元素节点
City.appendChild(Ele);
}
}
}
}
</script>
</head>
<body>
<div >
<div class="top1">
<img src="img/logo2.png" />
</div>
<div class="top1">
<img src="img/header.png" />
</div>
<div class="top1" style="padding-top: 15px; height: 35px">
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
<div id="clear">
</div>
<div id="menu">
<ul>
<li>首页</li>
<li>电脑办公</li>
<li>手机数码</li>
<li>孕育保健</li>
<li>鞋靴箱包</li>
</ul>
</div>
<div id="container">
<div id="content">
<table border="1" align="center" cellspacing="0" cellpadding="0px" >
<form method="get" action="#">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province" onchange="check()">
<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" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" /><br />
<img src="img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</form>
</table>
</div>
</div>
<div id="">
<img src="img/footer.jpg" width="99%" />
</div>
<div id="bottom">
<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 © 2005-2016 传智商城 版权所有 </p>
</div>
</div>
</body>
</html>
jq代码，为了简洁，我直接把jq的相关代码放出来，其他的与js这个事件相同
$(function(){
//3.C创建数组
var cities = new Array(1);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
//1.获取并绑定事件
$("#province").change(function(){
//9.获取第二个下拉列表
var City = $("#city");
//10清除第二个下拉列表，设置长度为0
City.empty();
//2.获取第一个下拉列表的value
var val = this.value;
//4.遍历数组
$.each(cities,function(i,n){
if(val==i){
//5.遍历二维数组
$.each(cities[i],function(j,m){
//6.创建文本节点
var textNode = document.createTextNode(m);
//7.创建元素节点
var Ele = document.createElement("option");
//8.添加文本节点
$(Ele).append(textNode);
$(Ele).appendTo(City);
});
}
});
});
});