三级联动下拉菜单1

一：HTML代码

1 <select id='c1'></select>
2 <select id='c2'></select>
3 <select id='c3'></select>

二: 三级菜单数组举例定义(实际从数据库中获取)

 var city1 = ['请选择','江苏','上海'];
                var city2 = [
                    [''],
                    ['suz','南京','无锡'],
                    ['上海A','上海B','上海C','上海D',]
                ];
                var city3 = [
                            [],
                            [
                                  ['s1','s2','s3'], 
                                  ['玄武','下关'],
                                  ['a','b','c','d'],
                            ],
                            [
                                  ['上海A1','上海A2','上海A3'], 
                                  ['上海B1','上海B2'],
                                  ['11','2','3','4'],
                            ]
                         ];

View Code

三:JS代码

 1 window.onload = function () {
 2                     
 3                     createCity1();
 4                     c1.onchange=createCity2;
 5                     document.getElementById('c2').onchange=createCity3;
 6                 }
 7 
 8                 function createCity1(){
 9                   c1 = document.getElementById('c1');
10                     for(var i in city1){
11                           var op = new Option(city1[i],city1[i]);
12                          c1.options.add(op);
13                     }
14                    
15                 }
16                 function createCity2(){
17                     var  c1_index =document.getElementById('c1').selectedIndex;
18                    var  c2 =document.getElementById('c2');
19                           c2.options.length = 0;
20                     for(var j in city2[c1_index]){
21                             var op2 = new Option(city2[c1_index][j],city2[c1_index][j]);
22                             c2.options.add(op2);
23                     }
24                 }
25                 function createCity3(){
26            
27                       var  c1_index =document.getElementById('c1').selectedIndex;  
28                       var  c2_index =document.getElementById('c2').selectedIndex;
29                       var  c3 =document.getElementById('c3');
30                         c3.options.length = 0;
31                       for(var k in city3[c1_index][c2_index]){
32                             var op3 = new Option(city3[c1_index][c2_index][k],city3[c1_index][c2_index][k]);
33                             c3.options.add(op3);
34                      
35                       }
36                     
37                 }