示例-下拉菜单-选择城市 

 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>
View Code

 

posted @ 2014-06-12 22:22  是但哥  阅读(814)  评论(0)    收藏  举报