1、WEB前台JSP页面相关代码:(type.jsp)这里只实现了三级级联菜单,还要实现多级的话,就可以照猫画虎,以此类推:
<html>
<head>
<script type="text/javascript">
$(function(){
//类型选择下拉列表
var $type=$("#type");
//searchBy对象
$searchBy=$("#searchBy");
searchByVal= $searchBy.val();
if(searchByVal=='type'){
showType();
}
//显示类型下拉列表
function showType(){
$type.append("<select name='type1' id='type1' οnchange='type1change()'>"+
"<option value=''>请选择一级类型..</option>"+
"</select>");
var $type1=$("#type1");
var url="<%=basePath%>admin/knowledge_types!findType1Names.action";
$.post(url, {}, function(data) {
if (data != "" && data != null) {
for (i = 0; i < data.length; i++) {
$('#type1').append("<option value='"
+ data[i] + "'>"
+ data[i] + "</option>");
}
}
},"json");
}
});
function type1change() {
var type1 = $("#type1").val();
if (type1 == "") {
$("#type2").remove();
$("#type3").remove();
$("#type4").remove();
$("#type5").remove();
} else {
var url="<%=basePath%>admin/knowledge_types!findType2Names.action";
$.post(url, {
"type1" : type1
},
function(data) {
$("#type2").remove();
$("#type3").remove();
$("#type4").remove();
$("#type5").remove();
if (data.length > 0 && data[0] != null) {
$("#type").append("<select name='type2' id='type2' οnchange='type2change()'>"+
"<option value=''>请选择二级类型..</option>"+
"</select>");
for (i = 0; i < data.length; i++) {
if (data[i] != null && data[i] != "") {
$('#type2').append("<option value='"
+ data[i] + "'>"
+ data[i] + "</option>");
}
}
}
},"json");
}
}
function type2change() {
var type1 = $("#type1").val();
var type2 = $("#type2").val();
if (type2 == "") {
$("#type3").remove();
$("#type4").remove();
$("#type5").remove();
} else {
var url="<%=basePath%>admin/knowledge_types!findType3Names.action";
$.post(url, {
"type1" : type1,
"type2" : type2
},
function(data) {
$("#type3").remove();
$("#type4").remove();
$("#type5").remove();
if (data.length > 0 && data[0] != null) {
$("#type").append("<select name='type3' id='type3' οnchange='type3change()'>"+
"<option value=''>请选择三级类型..</option>"+
"</select>");
for (i = 0; i < data.length; i++) {
if (data[i] != null && data[i] != "") {
$('#type3').append("<option value='"
+ data[i] + "'>"
+ data[i] + "</option>");
}
}
}
},"json");
}
}
</script>
</head>
<body>
查找:
<select name="pager.searchBy" id="searchBy">
<option value="type" >知识类型</option>
</select>
<span id="type">
</span>
<input type="button" id="searchButton" class="formButton" value="搜 索" />
</body>
</html>
2、WEB后台action相关代码代码:
public class KnowledgeTypesAction {
private KnowledgeTypesDao knowledgeTypesDao;
private KnowledgeTypes knowledgeTypes;
private String type1;
private String type2;
private String type3;
private String type4;
private String type5;
private List<String> type1Names;
private List<String> type2Names;
private List<String> type3Names;
private List<String> type4Names;
private List<String> type5Names;
public String findType1Names() {
type1Names = knowledgeTypesDao.getType1Names();
return ajax(type1Names);
}
public String findType2Names() {
if (StringUtils.isNotEmpty(type1)) {
type2Names = knowledgeTypesDao.getType2Names(type1);
}
return ajax(type2Names);
}
public String findType3Names() {
if (StringUtils.isNotEmpty(type1) && StringUtils.isNotEmpty(type2)) {
type3Names = knowledgeTypesDao.getType3Names(type1, type2);
}
return ajax(type3Names);
}
相关get、set方法,此处略
}