html 下拉框弹出树,layui-tree创建下拉树型选项框

1.简介

也许你对树菜单再熟悉不过了，然而你仍有可能更青睐layui的tree，它也许比以往你知道的任何一个类似的组件都更轻量、简单，你在享受许多功能的同时，甚至不用去记太多的参数。

另外，最大的重点在于，她在UI上完全遵循于当下主流的风格，并且具备高度可扩展性，会与你的许多页面非常融洽的并存。

2.制作如下案例

步骤1.编写html

*上级菜单:

--请选择--

步骤2.初始话树与加载数据

layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {

var $ = layui.jquery, tree = layui.tree;

loadMenuTree(tree);

$(".downpanel").on("click", ".layui-select-title", function (e) {

$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");

$(this).parents(".downpanel").toggleClass("layui-form-selected");

layui.stope(e);

}).on("click", "dl i", function (e) {

layui.stope(e);

});

$(document).on("click", function (e) {

$(".layui-form-select").removeClass("layui-form-selected");

});

});

function loadMenuTree(tree) {

var url = "permission/menuDataLayUiTree";

var params = {};

uwillBeAsyncTrue.getdata(url, params, function (data) {

tree({

elem: "#classtree",

nodes: data,

click: function (node) {

var $select = $($(this)[0].elem).parents(".layui-form-select");

$select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);

}

});

});

}

附件:

1.前端代码

pageEncoding="UTF-8" %>

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/";

%>

菜单管理

--%>

.downpanel .layui-select-title span {

line-height: 38px;

}

/*继承父类颜色*/

.downpanel dl dd:hover {

/* background-color: inherit;*/

}

body {

height: 100%;

width: 100%;

background-size: cover;

margin: 0 auto;

}

td {

font-size: 12px !important;

}

.layui-form-checkbox span {

height: 30px;

}

.layui-field-title {

border-top: 1px solid white;

}

table {

width: 100% !important;

}

.input-width {