1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>选择城市</title>
6 <style type="text/css">
7 select{
8 width:100px;
9 }
10 </style>
11 </head>
12
13 <body>
14
15 <script type="text/javascript">
16 function selectCity(){
17 var collCities = [['选择城市'],
18 ['海淀区','朝阳区','东城区','西城区'],
19 ['济南','青岛','烟台','威海'],
20 ['沈阳','大连','鞍山','抚顺'],
21 ['石家庄','保定','邯郸','廊坊']
22 ];
23
24 //获取两个下拉菜单对象
25 var oSelNode = document.getElementById("selid");
26 var oSubSelNode = document.getElementById("subselid");
27
28 //获取到底选择的是哪个省
29 var index = oSelNode.selectedIndex;
30
31 //通过角标到容器去获取对应的城市组
32 var arrCities = collCities[index];
33
34 //清除动作
35 oSubSelNode.length = 0;
36
37 //将子菜单中的内容清空一下。
38 for(var x=1;x<oSubSelNode.options.length; ){
39 oSubSelNode.removeChild(oSubSelNode.option[x]);
40 }
41
42 //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
43 for(var x =0;x<arrCities.length;x++){
44 var oOptNode = document.createElement("option");
45
46 oOptNode.innerHTML = arrCities[x];
47 oSubSelNode.appendChild(oOptNode);
48 }
49 }
50
51
52 </script>
53
54 <select id="selid" onchange="selectCity()">
55 <option>选择省市</option>
56 <option>北京</option>
57 <option>山东</option>
58 <option>辽宁</option>
59 <option>河北</option>
60 </select>
61
62 <select id="subselid">
63 <option>选择城市</option>
64 </select>
65 </body>
66 </html>
