三级联动下拉菜单1

一：HTML代码

<select id='c1'></select>
<select id='c2'></select>
<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'],
                            ]
                         ];

三:JS代码

window.onload = function () {
                    
                    createCity1();
                    c1.onchange=createCity2;
                    document.getElementById('c2').onchange=createCity3;
                }

                function createCity1(){
                  c1 = document.getElementById('c1');
                    for(var i in city1){
                          var op = new Option(city1[i],city1[i]);
                         c1.options.add(op);
                    }
                   
                }
                function createCity2(){
                    var  c1_index =document.getElementById('c1').selectedIndex;
                   var  c2 =document.getElementById('c2');
                          c2.options.length = 0;
                    for(var j in city2[c1_index]){
                            var op2 = new Option(city2[c1_index][j],city2[c1_index][j]);
                            c2.options.add(op2);
                    }
                }
                function createCity3(){
           
                      var  c1_index =document.getElementById('c1').selectedIndex;  
                      var  c2_index =document.getElementById('c2').selectedIndex;
                      var  c3 =document.getElementById('c3');
                        c3.options.length = 0;
                      for(var k in city3[c1_index][c2_index]){
                            var op3 = new Option(city3[c1_index][c2_index][k],city3[c1_index][c2_index][k]);
                            c3.options.add(op3);
                     
                      }
                    
                }