如图，要做一个两级的下拉标签，可以用函数实现，但是太麻烦，而且不灵活，查阅资料之后发现，jsTree很方便，下面介绍一下jsTree的入门，并附上代码。
阅读jsTree的官方文档之后，你会知道，它有很多实现方式，我下面使用的是Ajax请求，从后台获取json数据返回给jsTree。
jsTree的官网：https://www.jstree.com/
点击页面的Download按钮，下载并解压之后，将dist下的文件都复制到你自己的项目中
Html代码
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>通信监测</title><script type="application/javascript" src="plugins/jQuery/jquery-2.2.3.min.js"></script><link rel="stylesheet" href="dist/js/themes/default/style.min.css" /><script type="application/javascript" src="dist/js/jstree.js"></script></head><script> $(function() { $('#routerip').jstree({ "core" : { 'data' : { 'url' : "router/selectConEqui",//后台访问路径 'data' : function(node) { console.log(node); return node; } }, "themes" : { "ellipsis" : true //文字多时省略 }, "check_callback" : true }, "types" : { "default" : { "icon" : "false" }, "text" : { "icon" : "false" } }, "plugins" : [ "wholerow", "types", "themes" ] }).on('select_node.jstree', function(event, data) { //console.log(data.node); }).on('changed.jstree', function(event, data) { //console.log("-----------changed.jstree"); //console.log("action:" + data.action); //console.log(data.node); }); }); function create() { debugger; var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); currNode = ref.create_node(currNode, { "type" : "file" }); if (currNode) { ref.edit(currNode); } } function rename() { var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); ref.rename_node(currNode, "rename node222"); } function del() { var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); ref.delete_node(currNode); } function moveup() { var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); var prevNode = ref.get_prev_dom(currNode, true); ref.move_node(currNode, prevNode, 'before'); } function movedown() { var ref = $('#jstree1').jstree(true); var currNode = _getCurrNode(); var nextNode = ref.get_next_dom(currNode, true);//返回兄弟节点的下一个节点 ref.move_node(currNode, nextNode, 'after'); } /** * 获取当前所选中的结点 */ function _getCurrNode() { var ref = $('#jstree1').jstree(true), sel = ref.get_selected(); console.log(sel); if (!sel.length) { console.log("----"); return false; } selsel = sel[0]; return sel; }</script></head><body> <input type="button" value="create node" onclick="create();"> <input type="button" value="rename node" onclick="rename();"> <input type="button" value="del node" onclick="del();"> <input type="button" value="上移" onclick="moveup();"> <input type="button" value="下移" onclick="movedown();"> <div id="jstree1" style="width: 200px; background: #fff322"></div></body></html>后台代码
@ResponseBody public void selectConEqui(Model model, HttpServletRequest request, HttpServletResponse response) throws IOException { List<Map<String, String>> router = routerService.selectConEqui(); response.setContentType("application/json; charset=UTF-8"); response.getWriter().write(new Gson().toJson(router)); }数据库存储格式
sql查询
<select id="selectMenu" resultType="java.util.HashMap"> select <include refid="Base_Column_List" /> from menu </select>返回前端的json格式为
注意几点：1.根级parent的值固定设为“#”，其他的不能识别；
2.“parent”，“id",”text“都是固定的命名，且都是小写，如果数据库字段是大写，可以AS为小写；
如果没有这样的数据库结构，也可以通过后台代码将数据改造为上述格式
更多详细的用法，可以参考官方网站