从数据库查询数据进行联动(类似城市联动)
程序员文章站
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; }
上一篇: Mac-搭建Hadoop集群
下一篇: 春季养肝健脾按五穴位 按内关穴滋阴降火
推荐阅读
-
Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
-
对word直接从数据库查询进行下载
-
无限分类,从数据库查询数据 在数组中递归进行自定义排序
-
从数据库查询数据进行联动(类似城市联动)
-
无限分类,从数据库查询数据 在数组中递归进行自定义排序
-
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
-
Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
-
php-ajax 从页面中获取元素传递给PHP 进行数据库查询的问题
-
用php实现城市地区三级联动 附带数据库
-
php-ajax 从页面中获取元素传递给PHP 进行数据库查询的问题