需求：选择省份时右侧自动变为相应省份下的城市列表
<!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta charset="UTF-8"><title>用jQuery实现下拉框的二级联动</title><script src="../../resource/jquery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){//1.创建一个二维数组用于存放城市var cities=new Array(3);cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");$("#province").change(function() {//2.获取所选中的省份的下拉列表var index=this.value;//10.清空第二个列表$("#city").empty();//3.遍历二维数组$.each(cities, function(x, cityArr) {//4.判断遍历的省份和所选中的省份是否相同if(index==x){//5.遍历选中省份的城市列表$.each(cities[x], function(y, city) {//6.创建城市文本节点var textNode=document.createTextNode(city);//7.创建option节点var optionNode=document.createElement("option");//8.将城市文本节点添加到option节点中$(optionNode).append(textNode);//9.将option元素节点追加到第二个元素列表$(optionNode).appendTo($("#city"));})}})})})</script></head><body><table><tr><td>籍贯</td><td><select id="province" οnchange="changeCity(this.value)"><option>--请选择--</option><option value="0">湖北</option><option value="1">湖南</option><option value="2">河北</option><option value="3">河南</option></select><select id="city"></select></td></table></body></html>
用js实现下拉列表的二级联动请看上一篇博文 哦了~
