从数据库查询数据进行联动（类似城市联动）

数据库自己定义，我用了四个框联动，选择了一个才会出现下一个，每一个都会去数据库查询一次。但是一开始第一次的方法是查询一次，然后每次联动都用的最开始一次的数据查询，后来发现查询一次不能让联动点来点去，只能一次顺序过去，所以才每次都查询。

第一次：

前端:

<select id="first" class="select"onchange="firstsel()"></select>
<select class="select" id="second"></select>                
<select class="select"id="third"></select>
<select class="select"id="fourth"></select>

js:

function firstsel(){//如果第一个下拉列表的值改变则调用此方法
        var province = $("#first").val();//得到第一个下拉列表的值
        $("#second").hide(); //初始化的时候第二个下拉列表隐藏
        $("#third").hide();
        $("#fourth").hide();
        url = "shopget";
        param = "{\"province\":\"" + province+ "\"}";    
        jsonobj = json.parse(param);
        if(province!=null && "" != province&& 1 != province){
            //传递数据
            $.post(url,jsonobj,function(data){        
                    var res = json.parse(data);
                    var newcity = [];
                    var newarea= [];
                    var newshop= [];
                    var option="<option value='0'>"+"-城市-"+"</option>";        
                    $.each(res,function(i,n){//循环，i为下标从0开始，n为集合中对应的第i个对象
                        if(newcity.indexof(n.city) == -1) {　//去掉重复值　　　
                            newcity.push(n.city);
                            option += "<option value='"+n.city+"'>"+n.city+"</option>"　　
                        }
                    });
                    $("#second").html(option);//将循环拼接的字符串插入第二个下拉列表
                    $("#second").show();//把第二个下拉列表展示
                    $("#second").change(function () {//选择第二个框时
                    $("#third").hide();
                    $("#fourth").hide();//从前面重新选择时后面的选框要消失
                    var city = $("#second").val();
                    var option1="<option value='0'>"+"-市区-"+"</option>";
                    /////
                    for(i in newcity){//在城市数组中循环找到我选择的城市
                        if(city==newcity[i]){//如果找到了就开始下一步
                           $.each(res,function(i,n){//循环全部的数据库数据
                               if(n.city==city) {　//如果数据库中某个城市是我选择的就添加地区到地区数组
                                   if(newarea.indexof(n.area) == -1){　　
                                     newarea.push(n.area);
                                    option1 += "<option value='"+n.area+"'>"+n.area+"</option>"　　
                                }}});
                        }}
              
                    $("#third").html(option1);//将循环拼接的字符串插入第二个下拉列表
                    $("#third").show();//把第二个下拉列表展示
                    $("#third").change(function () {
                        var area = $("#third").val();
                        var option2="<option value='0'>"+"-站点-"+"</option>";
                        for(i in newarea){
                            if(area==newarea[i]){
                                 $.each(res,function(i,n){
                                     if(n.area==area){
                                         if(newshop.indexof(n.shop) == -1){　　
                                             newshop.push(n.shop);
                                           option2 += "<option value='"+n.shop+"'>"+n.shop+"</option>"　 
                            } } }); } } 
                    $("#fourth").html(option2);//将循环拼接的字符串插入第四个下拉列表
                    $("#fourth").show();//把第四个下拉列表展示
                    $("#fourth").change(function () {
                        var shop=$("#fourth").val();
                        alert(shop);
                    });                
                });
            });
            });
        }else {
            $("#second").hide();
        }}

数据库：

public arraylist<shop> shopselectd(shop shop) throws sqlexception {
        string sql = "select * from shop where 1=1 and province=?";
        pst = conn.preparestatement(sql);
        pst.setstring(1,shop.getprovince());
        conn.commit();
        resultset rs = pst.executequery();
        arraylist<shop> shoplist = new arraylist<shop>();
        if(rs.next()){
          for(int i=0;i<=rs.getrow();i++){
              shop shoptmp = new shop();
              shoptmp.setid(rs.getint("id"));
              shoptmp.setprovince(rs.getstring("province"));
              shoptmp.setcity(rs.getstring("city"));
              shoptmp.setarea(rs.getstring("area"));
              shoptmp.setshop(rs.getstring("shop"));
              shoplist.add(shoptmp);
            rs.next(); 
          }
        }
        return shoplist;
      }

第二次：

<select class="select"id="first2"name="first2" onchange="change(this)"></select>
                  <select class="select"id="second2"name="second2"onchange="change(this)"></select>
                  <select class="select"id="third2"name="third2"onchange="change(this)"></select>
                  <select class="select"id="fourth2"name="fourth2"onchange="change(this)"></select>

function change(which){
    var type=null;
    var i=0;
    if(which.id=='first2'){
        $("#second2")[0].style.opacity = "0";
        $("#third2")[0].style.opacity = "0";
        $("#fourth2")[0].style.opacity = "0";
        var da =$('[name="first2"] option:selected').val();
        type="省会";
        id=2;
    }
    if(which.id=='second2'){
        $("#third2")[0].style.opacity = "0";
        $("#fourth2")[0].style.opacity = "0";
        var da =  $("#second2").val();
        type="城市";
        id=3;
    }
    if(which.id=='third2'){
        var da =  $("#third2").val();
        type="市区";
        id=4;
    }
    url = "shopallget";
    param = "{\"date\":\"" +da+ "\",\"type\":\""+type+"\"}";    
    jsonobj = json.parse(param);
    $.post(url,jsonobj,function(data){
        var res = json.parse(data);switch(id){
        case 2:        
            option = "<option value='1'>"+"-城市-"+"</option>"
            $.each(res,function(i,n){//循环，i为下标从0开始，n为集合中对应的第i个对象           
                    option += "<option value='"+n.city+"'>"+n.city+"</option>"　　        
            });
            $("#second2").html(option);//将循环拼接的字符串插入第二个下拉列表
            $("#second2")[0].style.opacity = "1"//把第二个下拉列表展示
            break;
        case 3:
            option = "<option value='1'>"+"-市区-"+"</option>"
            $.each(res,function(i,n){//循环，i为下标从0开始，n为集合中对应的第i个对象     
                    option += "<option value='"+n.area+"'>"+n.area+"</option>"　　
              
            });
            $("#third2").html(option);
            $("#third2")[0].style.opacity = "1"
            break;
        case 4:
            option="<option value='0'>"+"-站点-"+"</option>";
            $.each(res,function(i,n){
                    option+= "<option value='"+n.shop+"'>"+n.shop+"</option>"　 
                }); 
            $("#fourth2").html(option);
            $("#fourth2")[0].style.opacity = "1"
            break;
        default:
            break;
        }    
    });
}

if("省会".equals(type)){
                shop.setprovince(date);
                 system.out.print("action");
                 arraylist<shop> shoplist = shopsi.shopfinds(shop);
                    if(shoplist.isempty()){        
                        out.print("查询错误");//传值，否则查不到数据会报错
                        }        
                    else{                       
                        jsonarray shoplistmsg = jsonarray.fromobject(shoplist);
                        out.print(shoplistmsg);
                        system.out.print(shoplistmsg);                                             
                }}
            else if("城市".equals(type)){
                shop.setcity(date);
                 arraylist<shop> shoplist2 = shopsi.cityfinds(shop);
                    if(shoplist2.isempty()){        
                        out.print("查询错误");//传值，否则查不到数据会报错
                        }        
                    else{                       
                        jsonarray shoplistmsg = jsonarray.fromobject(shoplist2);
                        out.print(shoplistmsg);
                        system.out.print(shoplistmsg);    
                    }
            }else if("市区".equals(type)){
                shop.setarea(date);
                 arraylist<shop> shoplist3 = shopsi.areafinds(shop);
                    if(shoplist3.isempty()){        
                        out.print("查询错误");//传值，否则查不到数据会报错
                        }        
                    else{                       
                        jsonarray shoplistmsg = jsonarray.fromobject(shoplist3);
                        out.print(shoplistmsg);
                        system.out.print(shoplistmsg);    
                    }
            }//多的话可以继续联动

 

public arraylist<shop> provinceselectd(shop shop) throws sqlexception{
    string sql = "select distinct province from shop;";//用了 distinct去重复，所以js可以不用数组来去重
    pst = conn.preparestatement(sql);
    conn.commit();
    resultset rs = pst.executequery();
    arraylist<shop> shoplist = new arraylist<shop>();
    if(rs.next()){
      for(int i=0;i<=rs.getrow();i++){
          shop shoptmp = new shop();
          shoptmp.setprovince(rs.getstring("province"));
          shoplist.add(shoptmp);
        rs.next(); 
      }
    }
    return shoplist;
    }