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