easyUI-combobox实现select多级联动

easyUI-combobox实现select二级联动

ps:这里是二级联动，多级联动与二级联动原理一样；

第一次用easyUI做级联，做个记录。直接上代码

---

后台代码：

    /**
     * 客户多级联动 根据父级id 查询对应的列表;
     * 
     * @param request
     * @return
     */
    @RequestMapping("/log/web/getCustomerByParentID.htm")
    @ResponseBody
    public String getCustomerByParentID(HttpServletRequest request) {
        String parentIDStr = request.getParameter("parentID");
        int parentID;
        try {
            parentID = Integer.valueOf(parentIDStr);
            List<Customer> cusList = customerService.findByParentID(parentID);
            String returnJson = JSON.toJSONString(cusList);
            return returnJson;
        } catch (Exception e) {
            Map<String, String> returnMap = new HashMap<String, String>();
            returnMap.put("code", "1");
            returnMap.put("msg", "服务器出现错误,请联系管理员");
            String returnJson = JSON.toJSONString(returnMap);
            return returnJson;
        }

    }

后台返回json串,如下格式:

引用块内容{

    "agency": false,
    "classes": 1,
    "id": 2,
    "name": "广州铁路(集团)公司",
    "parentID": 1,
    "path": "/1/2/"
}, {
    "agency": false,
    "classes": 1,
    "id": 3,
    "name": "成都铁路局",
    "parentID": 1,
    "path": "/1/3/"
}, {
    "agency": false,
    "classes": 1,
    "id": 4,
    "name": "乌鲁木齐铁路局",
    "parentID": 1,
    "path": "/1/4/"
},{
    "agency": false,
    "classes": 1,
    "id": 5,
    "name": "南昌铁路局",
    "parentID": 1,
    "path": "/1/5/"
},{
    "agency": true,
    "classes": 1,
    "id": 55,
    "name": "北京三岭公司",
    "parentID": 1,
    "path": "/1/55/"
},  {
    "agency": false,
    "classes": 1,
    "id": 96,
    "name": "其他",
    "parentID": 1,
    "path": "/1/96/"
}]

前端jsp内容，采用easyUI
需引用的js及Css:

//${ctx}是项目根目录
<link rel="stylesheet" type="text/css"
    href="${ctx}/resource/jquery-easyui-1.5.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
    href="${ctx}/resource/jquery-easyui-1.5.3/themes/icon.css" />
<script src="${ctx}/resource/jquery-easyui-1.5.3/jquery.min.js"></script>
<script src="${ctx}/resource/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>

采用easyUI的combobox控件：

<div id="firstCustDiv" style="float: left;">
        <select id="firstCust" class="easyui-combobox form-control"
                style="height: 34px;">
        </select>
</div>
<div hidden="hidden" style="float: left;" id="secondCustDiv">
        <select id="secondCust" class="easyui-combobox form-control"
                style="height: 34px;">
        </select>
</div>

js编写内容：

<script>
        //页面加载完毕后，初始化添加界面第一级select;
        $(function() {
        //name为select的id，parendID为父级select选中的id，初始化parendID为1；
            var name= 'firstCust';
            var parendID = '1';
            fistSelectGetOption(name,parendID);
        });
        //封装获取select中option的方法；
        function fistSelectGetOption(name,parendID){
            $('#'+name).combobox({
                url:"${ctx}/log/web/getCustomerByParentID.htm?parentID="
                    + parendID,
                valueField:'id',
                textField:'name'
                });
        }
        //一级select改变;
        $("#firstCust").combobox({  
            onChange: function () {  
            var newPtion = $("#firstCust").combobox('getValue')  
            $("#selectValue").val(newPtion);
            fistSelectGetOption('secondCust',newPtion);
            $("#secondCustDiv").show();
            /* $("#thirdCustDiv").hide(); */
            }  
        })  
    </script>