四级联动下拉菜单

数据库导出地址数据联动显示下拉菜单

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" οnchange="change1(this)">
			<option name="op2" id="op2"  >全部</option>
		</select>
		街道:<select name="sel3" id="sel3"  οnchange="change1(this)">
			<option name="op3" id="op3" >全部</option>
		</select>
		社区:<select name="sel4" id="sel4" οnchange="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";
    }
因为是点击查询后重定向到list页面,左右用的是
RedirectAttributesModelMap



如果需要可以无限级别联动,只要是数据库结构做好就OK了.


效果: