下拉菜单三级级联的效果实现（jsp、js、Java、mysql）

三级级联的下拉菜单效果实现

1、效果图

2、jsp代码

<strong><span style="font-size:18px;">				<tr>
<td>类别</td>
<td>
<select name="level1" id="level1" onchange="changeLevel('level1','level2');" style="width:100px;">
<option value="all" selected>全部
</select>
<select name="level2" id="level2" onchange="changeLevel('level2','level3');" style="width:100px;">
</select>
<select name="level3" id="level3" style="width:100px;">
</select>
</td>
</tr></span></strong>

3、js代码

加载jsp时，首先加载getLevel（）方法

<strong><span style="font-size:18px;">	$(function(){
loadTable();
$('#searchtool').prependTo('.datagrid-toolbar');
getLevel("level1","top",true);
});</span></strong>

该js方法实现递归算法，通过post方法从后台获取数据返回到页面，遍历查询所得数据，添加到相关的下拉菜单下实现级联效果

//类别级联
function getLevel(levelId,parentId,ifFirst){
$("#"+levelId).html("");
$("#level3").html("");

if("level1"==levelId){
$("#"+levelId).append("<option value=''>全部");
}

if(""==parentId)return;

$.post('<%=basePath%>/suggestion/getLevel',
{parentId:parentId},
function (data){
$(data).each(function(i){
$("#"+levelId).append("<option value='"+this.id+"'>"+this.name);
if(!ifFirst&&i==0){
if("level1"==levelId){
changeLevel('level1','level2');
}
if("level2"==levelId){
changeLevel('level2','level3');
}
}
});
});
}

changeLevel方法是在下拉菜单选项变化是调用

function changeLevel(ls,le,ifFirst){
getLevel(le,$("#"+ls).val());
}

通过JQ获取ls的ID值，作为parentId传入getLevel（）方法中进行查询

4、Java代码

controller.java中代码

@Resource
private FunctionTreeService functionTreeService;

@RequestMapping(value = "/getLevel", method = POST)
@ResponseBody
public List<FunctionTree> getLevel(String parentId) {

List<FunctionTree> list = functionTreeService.getLevel(parentId);

return list;
}

service.java中代码

@Service
public class FunctionTreeService {
@Resource(name = "userDao")
private HibernateDao<FunctionTree, String> functionTreeDao;

public List<FunctionTree> getLevel(String parentId){

String hql = "from FunctionTree where 1=1 ";

if (StringUtils.isEmpty(parentId)) {

}else{

if ("top".equals(parentId)) {
hql += " and parent is null";
}else {
hql += " and parent.id="+parentId;
}

}

hql += " order by id";

List<FunctionTree> l = functionTreeDao.findByHql(hql);

return l;
}

}

5、mysql数据库数据


本文仅用于个人总结和查看，不喜勿喷。