四級聯動下拉選單
阿新 • • 發佈：2019-01-04
資料庫匯出地址資料聯動顯示下拉選單
1.先說資料庫結構,上圖:
結構副id形式,sid是本條資料的id,fid是本條資料的上級資料的sid.
就是把這種級別關係建立在資料庫裡,之後用起來就簡單了.
2.前端程式碼
html:
<!-- 聯動 --> 市級:<select name="sel1" id="sel1" "> <option name="op1" id="op1" value="01">北京</option> </select> 區級:<select name="sel2" id="sel2" onchange="change1(this)"> <option name="op2" id="op2" >全部</option> </select> 街道:<select name="sel3" id="sel3" onchange="change1(this)"> <option name="op3" id="op3" >全部</option> </select> 社群:<select name="sel4" id="sel4" onchange="change1(this)"> <option name="op4" id="op4" >全部</option> </select>
<!-- 回顯的隱藏域 --> <input type="hidden" id="quji" value="${quji}"> <input type="hidden" id="jiedao" value="${jiedao }"> <input type="hidden" id="shequ" value="${shequ }"> <input type="hidden" id="jiedao1" value="${jiedao1 }"> <input type="hidden" id="shequ1" value="${shequ1 }">
jquery:
第一個ajax請求:(因為是要從市級開始,所以fid固定為01就是北京,這個時啟動載入)
$(function(){ var quji=$("#quji").val(); var jiedao=$("#jiedao").val(); var shequ=$("#shequ").val(); var jiedao1=$("#jiedao1").val(); var shequ1=$("#shequ1").val(); $.ajax({ url:'${rootpath}/fenye/address', type:'post', data:{ fid:'01' }, success:function(data){ var quji=$("#quji").val(); var htmlStr=""; $.each(data,function(index,obj){ if (obj.sId == quji) { htmlStr += "<option selected value='"+obj.sid+"'>" + obj.name + "</option>"; } else { htmlStr += "<option value='"+obj.sid+"'>" + obj.name + "</option>"; } }); $("#sel2").html(htmlStr); /* 回顯 */ if(jiedao1!=null&&jiedao1!=""){ $("#sel3").append("<option selected value='"+jiedao+"'>"+jiedao1+"</option>"); $("#sel4").append("<option selected value='"+shequ+"'>"+shequ1+"</option>"); } } });
第二個ajax請求:(這個ajax分開寫是為了可以做成無限級)
function change1(sel){
var quji=$("#quji").val();
var jiedao=$("#jiedao").val();
var shequ=$("#shequ").val();
if(sel.id=='sel2'){
var fid1 = $('[name="sel2"] option:selected').val();
}
if(sel.id=='sel3'){
var fid1 = $('[name="sel3"] option:selected').val();
}
if(sel.id=='sel4'){
var fid1 = $('[name="sel4"] option:selected').val();
}
$.ajax({
url:'${rootpath}/fenye/address',
type:'post',
data:{
fid:fid1
},
success:function(data){
var htmlStr="";
$.each(data,function(index,obj){
htmlStr+="<option value='"+obj.sid+" ' " ;
if(obj.sid==quji){
htmlStr+='selected '
}
htmlStr+=">"+obj.name+"</option>";
});
if(sel.id=='sel2'){
$("#sel3").html(htmlStr);
}
if(sel.id=='sel3'){
$("#sel4").html(htmlStr);
}
}
});
}還有一步,因為每個下拉框預設的第一個選項顯示的是"全部",所有在serviceImpl裡面有個小操作.
當然也可以用其他方法解決.
@Override
public List<Address> findListByFid(Address address) {
List<Address> addlist = addressMapper.findListByFid(address);
Address address1=new Address();
/*新增全部選項,並保證在第一個顯示*/
address1.setName("全部");
List<Address> list = new ArrayList<>();
list.add(address1);
for(int i =0;i<addlist.size();i++){
list.add(addlist.get(i));
}
return list;
}/*點選查詢回顯*/
@RequestMapping("/fenye/findLD")
public String findLD(RedirectAttributesModelMap modelMap,Model model,String sel1,String sel2,String sel3,String sel4){
modelMap.addFlashAttribute("quji", sel2);
modelMap.addFlashAttribute("jiedao", sel3);
modelMap.addFlashAttribute("shequ", sel4);
Map<String, Object> map=new HashMap<>();
map.put("sid", sel3);
Address add=addressService.findById(map);
modelMap.addFlashAttribute("jiedao1", add.getName());
Map<String, Object> map1=new HashMap<>();
map1.put("sid", sel4);
Address add1=addressService.findById(map1);
modelMap.addFlashAttribute("shequ1", add1.getName());
return "redirect:/fenye/list";
}RedirectAttributesModelMap如果需要可以無限級別聯動,只要是資料庫結構做好就OK了.
效果:
