欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

从数据库查询数据进行联动(类似城市联动)

程序员文章站 2022-05-27 14:17:36
数据库自己定义,我用了四个框联动,选择了一个才会出现下一个,每一个都会去数据库查询一次。但是一开始第一次的方法是查询一次,然后每次联动都用的最开始一次的数据查询,后来发现查询一次不能让联动点来点去,只能一次顺序过去,所以才每次都查询。 第一次: 前端: 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;
    }