博客

二级联动有时我们在项目当中会遇到，所以就来记录以及分享一下。

先上个效果图吧：

思路：1、首先你需要获取你主表的全部数据（也就是你需要展示的数据），就比如，你先要得到全部的省份，再根据相应的省份得到相应的市是吧。（这个可以根据像查询单个条件那样查询）

2、这时候你的省已经出来了，就可以根据省得到市了，可以根据省的id查询出市，把你的省的id传过去，根据你的这个id查询其对应市的表，这时你便可以查询并显示你想要的字段了

实现 jsp：

<td style="width: 40%;">
                                            <label class="col-sm-3 control-label">上游渠道</label>
                                            <div class="col-sm-4">
                                                <select class="form-control pull-left" id="cup_channel_id" 
        //点击第一个框时调用第二个下拉框的方法                        onchange="getByCupChannelProduct(this.value,'cup_channel_product_id')" name="cup_channel_id"  >
                                                </select>
                                            </div>
                                            <label class="col-sm-1 control-label"></label>
                                            <div class="col-sm-4" id="cup_channel_product_id_div" style="display: none;">
                                                <select class="form-control pull-left" id="cup_channel_product_id" name="cup_channel_product_id"  >
                                                </select>
                                            </div>
                                        </td>

js

function getByCupChannelProduct(cup_channel_id,id){
    var obj = $("#"+id);
    if(cup_channel_id == ''){
        obj.empty();
    }else{
        var obj = $("#"+id);
        $.post("cupchannelmerinfo/getByCupChannelProduct.do", {"cup_channel_id":cup_channel_id}, function (data) {
            if (!data.result) {
                alertErrorAtBottomRight(data.errorMsg);
                obj.empty();
    /**样式 二级的点击有就显示  无就不显示
    /           $("#cup_channel_product_id_div").css("display","none");
            } else {
                $("#cup_channel_product_id_div").css("display","block");
                var value = data.data;
                var len = value.length;
                obj.empty();
                obj.append("<option value=''>请选择</option>");
                for(var i=0;i<len;i++){
                    obj.append("<option value='"+value[i].id+"'>"+value[i].product_name+"</option>");
                }
            }
        }, 'json');
    }
}

controller

@RequestMapping(value = "getByCupChannelProduct.do", method = RequestMethod.POST)
    public @ResponseBody AjaxProcessResult getByCupChannelProduct(HttpServletRequest request,HttpServletResponse response){
        String cup_channel_id = request.getParameter("cup_channel_id");

        if(StringHandler.isEmpty(cup_channel_id)){
            return AjaxProcessResult.getErrorResult("上游渠道编号不能为空");
        }
        try {
            List<CupChannelProduct> list = cupChannelProductService.getByCupChannelId(Long.valueOf(cup_channel_id));
            if(list != null && list.size() > 0)
                return AjaxProcessResult.getSuccessResult(list);
            else
                return AjaxProcessResult.getErrorResult("获取产品信息为空");
        } catch (Exception e) {
            if(LOG.isErrorEnabled())
                LOG.error(e.getMessage());
            return AjaxProcessResult.getErrorResult(e.getMessage());
        }
    }

其他就是不贴了，关键代码都已贴完，其实最重要的是思路，你思路清晰了，自然而然的就能写出来了。一起加油！！！