二级联动
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>菜单二级联动效果</title>
6 </head>
7 <body>
8 <script language="JavaScript" type="text/javascript">
9 /*var city=[
10 ["北京","天津","上海","重庆"],
11 ["南京","苏州","南通","常州"],
12 ["福州","福安","龙岩","南平"],
13 ["广州","潮阳","潮州","澄海"],
14 ["兰州","白银","定西","敦煌"]
15 ];*/
16 //或者
17 var city = new Array;
18 city[0] = Array("北京","天津","上海","重庆");
19 city[1] = Array("南京","苏州","南通","常州");
20 city[2] = Array("福州","福安","龙岩","南平");
21 city[3] = Array("广州","潮阳","潮州","澄海");
22 city[4] = Array("兰州","白银","定西","敦煌");
23 function getCity(){
24 var sltProvince=document.getElementById("province");
25 var sltCity=document.getElementById("city");
26 var provinceCity=city[sltProvince.selectedIndex-1];
27 sltCity.length=1; //清空城市列表
28 for(var i=0;i<provinceCity.length;i++){
29 sltCity[i+1]=new Option(provinceCity[i]);
30 }
31 }
32
33 </script>
34 <form action="#" name="theForm">
35 <select name="province" id="province" onchange="getCity()">
36 <option value="0">请选择所在省份</option>
37 <option value="直辖市">直辖市</option>
38 <option value="江苏省">江苏省</option>
39 <option value="福建省">福建省</option>
40 <option value="广东省">广东省</option>
41 <option value="甘肃省">甘肃省</option>
42 </select>
43 <select id="city" name="city">
44 <option value="0">请选择所在城市</option>
45 </select>
46 </form>
47 </body>
48 </html>
上文摘录，下文自己写，区别：个城市列表添加城市的时候方法不同
1 <!DOCTYPE HTML>
2 <head>
3 <meta charset="UTF-8">
4 <title></title>
5 <script>
6 window.onload= function () {
7 var opro=document.getElementById('pro');
8 var ocity=document.getElementById('city');
9 //城市数组
10 var cho=[['北京','上海','重庆'],['成都','广安','绵阳'],['福州','福清','厦门']];
11 //给省份列表的每个省市加点击事件
12 for(var i=1;i<opro.children.length;i++){
13 opro.children[i].onclick= function () {
14 var choose=cho[opro.selectedIndex-1];
15 //清空城市列表，只剩第一个提示信息
16 ocity.length=1;
17 //给城市列表添加对应的城市
18 for(var j=0;j<choose.length;j++){
19 var opt=document.createElement('option');
20 opt.innerHTML=choose[j];
21 ocity.appendChild(opt);
22 }
23 }
24 }
25 }
26 </script>
27 </head>
28 <select id="pro">
29 <option value="0">--请选择--</option>
30 <option value="直辖市">直辖市</option>
31 <option value="四川省">四川省</option>
32 <option value="福建省">福建省</option>
33 </select>
34 <select id="city">
35 <option value="0">--请选择--</option>
36 </select>
37 </body>
38 </html>
