WEB项目创建级联下拉菜单

最新推荐文章于 2023-05-01 22:25:10 发布

平凡的小码农

最新推荐文章于 2023-05-01 22:25:10 发布

阅读量830

点赞数

分类专栏： WEB开发(JAVA) 文章标签： web javascript

本文链接：https://blog.csdn.net/u011407281/article/details/38963163

版权

WEB开发(JAVA) 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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方法，此处略
}