js配合数据库实现类似城市联动下拉列表

时间:2018-09-18
本文章向大家介绍js配合数据库实现类似城市联动下拉列表,需要的朋友可以参考一下

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

第一次:

前端:

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