二级联动菜单

Posted on 2015-04-24 12:22  小蕊同学  阅读(170)  评论(0编辑  收藏  举报
 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>网站首页</title>
 6 </head>
 7 
 8 <body>
 9 收货地址:
10 省:<select id="ss">
11 <option>--请选择--</option>
12 </select>
13 
14 市:<select id="aa">
15 <option>--请选择--</option>
16 </select>
17 </body>
18 </html>
19 <script>
20 function $(id){return document.getElementById(id);}
21 
22 var arr = ['河南省','北京市','上海市','广东省'];
23 var aaa = [ 
24             ['郑州','开封','洛阳','新乡','许昌'],
25             ['海淀区','朝阳区'],
26             ['浦东','aaaa','cccc'],
27             ['广州','深圳']
28     ];
29 $('ss').options.length = arr.length;
30 for(var i in arr){
31     $('ss').options[i].value = arr[i];
32     $('ss').options[i].text = arr[i];
33 }
34 
35 var v = arr.indexOf('河南省');
36 $('aa').options.length = aaa[v].length;
37 for(var i in aaa[v]){
38     $('aa').options[i].text = aaa[v][i];
39     $('aa').options[i].text = aaa[v][i];
40 }    
41 
42 $('ss').onchange = function(){
43     var v = arr.indexOf(this.value);
44     $('aa').options.length = aaa[v].length;
45     for(var i in aaa[v]){
46         $('aa').options[i].text = aaa[v][i];
47         $('aa').options[i].text = aaa[v][i];
48     }    
49 }
50 
51 </script>

 

Copyright © 2024 小蕊同学
Powered by .NET 8.0 on Kubernetes