三级联动的实现

较为粗糙的实现

jsp页面 地 址

选择省${p.get("name") }选择城市选择区县

<select id="provincecode">
　　<option value="-1">选择省</option>
　　<option value="${p.get('code') }">${p.get("name") }</option>
</select>

<select id="citycode">
　　<option value="0">选择城市</option>
</select>

<select id="countycode">
　　<option value="0">选择区县</option>
</select>
js代码，我建议放在html的尾端

$("#provincecode").blur(function(){
    //清楚value=0以外的值
    $("#citycode option[value!='0']").remove();
    var provincecode1=$("#provincecode").val();
    var data={"provincecode":provincecode1};
    var url="${BasePath}/userLogin/cityList.do";
    $.post(url,data ,function(str){
        var cityList=eval(str);
        for (var i = 0; i < cityList.length; i++) {
            
            $("#citycode").append("<option value ="+cityList[i].code+">"+cityList[i].name+"</option>");
            
        }
    });
});
/*联动获取区县列表 */
 $("#citycode").blur(function(){
    $("#countyId option[value!='0']").remove();
     var citycod=$("#citycode").val();
     var data={"citycode":citycod};
    var url="${BasePath}/userLogin/countyList.do";
     alert("快乐的一天！");
     $.post(url,data,function(str){
        
            var countyList=eval(str);
            for(var i = 0;i < countyList.length; i++){
                
                $("#countycode").append("<option value="+countyList[i].code+">" +countyList[i].name+"</option>");    
                 alert("快乐的一天！");
            }
     });
 });

Controller层代码

/**
     * 显示城市列表
     * @param provincecode
     * @param model
     * @return
     */
    @RequestMapping("/cityList.do")
    @ResponseBody
    public String getCityList(Integer provincecode,Model model){
        List<Map<String,Object>> cityList=userService.getCityList(provincecode);
         Gson jsn = new Gson();
         String str=jsn.toJson(cityList);
         System.out.println(str);
        return str;
    }
    /**
     * 显示区县列表
     * @param citycode
     * @param model
     * @return
     */
    @RequestMapping("/countyList.do")
    @ResponseBody
    public String getCountyList(Integer citycode,Model model){
        List<Map<String,Object>>countyList=userService.getCountyList(citycode);
        Gson jsn=new Gson();
        String str=jsn.toJson(countyList);
         System.out.println(str);
        return str;
    }

转载于:https://www.cnblogs.com/lcyxfei/p/6738220.html