從數據庫查詢數據進行聯動（類似城市聯動）

數據庫自己定義，我用了四個框聯動，選擇了一個才會出現下一個，每一個都會去數據庫查詢一次。但是一開始第一次的方法是查詢一次，然后每次聯動都用的最開始一次的數據查詢，后來發現查詢一次不能讓聯動點來點去，只能一次順序過去，所以才每次都查詢。

第一次：

前端:

<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;
    }