二级联动菜单

 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>

 

你可能感兴趣的:(菜单)