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>

最后

以上就是怕孤独玫瑰为你收集整理的easyUI-combobox实现select多级联动easyUI-combobox实现select二级联动的全部内容，希望文章能够帮你解决easyUI-combobox实现select多级联动easyUI-combobox实现select二级联动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。