码迷,mamicode.com
首页 > 其他好文 > 详细

二级联动菜单

时间:2015-04-24 13:53:33      阅读:119      评论:0      收藏: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>

 

二级联动菜单

标签:

原文地址:http://www.cnblogs.com/lsr111/p/4453114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!