一. 效果演示
看到效果图是不是有点小心动，接下来附上源码、呈上教程
layui实现树形下拉菜单源码，点击下载
二. 插入css样式、引用js插件
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style type="text/css">
.treeSelect .layui-select-title span {
line-height: 38px;
}
.layui-form-select dl{
padding: 0;
}
</style>
<script src="layui/layui.js"></script>
三. 添加html代码
<body class="layui-row">
<form class="layui-form layui-form-pane" style="margin: 50px;">
<div class="layui-form-item">
<label class="layui-form-label">职务栏目</label>
<div class="layui-input-block" style="width: 300px;">
<div class="layui-unselect layui-form-select treeSelect">
<div class="layui-select-title">
<span class="layui-input layui-unselect" id="treeTest">选择栏目</span>
<input type="hidden" name="jobID" value="12">
<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
<dd>
<ul id="treeUl"></ul>
</dd>
</dl>
</div>
</div>
</div>
</form>
</body>
四. JS代码
layui.config({
base: './layui/' //静态资源所在路径
});
layui.use(['layer', 'tree', 'form'], function () {
var $ = layui.jquery,
layer = layui.layer,
form = layui.form,
tree = layui.tree;
tree({
elem: "#treeUl", //指定元素
nodes: [ //节点
{
name: '超级管理员',
spread: false,
id: 1,
children: [{
name: '母公司管理员',
id: 11,
href: 'https://download.csdn.net/download/ii950606/13081283/'
}, {
name: '子公司管理员',
id: 12
}]
}, {
name: '总经办',
spread: true,
id: 2,
children: [{
name: '经营部',
id: 21,
spread: true,
children: [{
name: '采购',
id: 211
}, {
name: '渠道',
id: 212
}]
}, {
name: '维修部',
id: 22,
children: [{
name: '北组',
id: 221
}, {
name: '南组',
id: 222
}, {
name: '维管组',
id: 223
}]
}]
}, {
name: 'ITS部',
id: 1
}, {
name: '管理部',
id: 3,
children: [{
name: '系统维护',
id: 31,
children: [{
name: '前端',
id: 121
}, {
name: '全端',
id: 122
}]
}, {
name: '人力资源',
id: 12
}]
}
],
click: function(node) {
//点击节点回调
var othis = $($(this)[0].elem).parents(".layui-form-select");
othis.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='jobID']").val(node.id);
layer.msg("选择了id="+node.id+"的数据", {
icon: 1,
time: 5000,
offset: '15px'
});
}
});
$(".treeSelect").on("click", ".layui-select-title", function(e) {
$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
$(this).parents(".treeSelect").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");
});
// 获取选中值
var jobId= $("input[name='jobID']").val();
// 默认选中
var checkNode = {
id: 211,
name: '采购'
}
var othis = $(".layui-form-select");
othis.removeClass("layui-form-selected").find(".layui-select-title span").html(checkNode.name).end().find("input:hidden[name='jobID']").val(checkNode.id);
form.render();
});
大功告成！赠人玫瑰手留余香，若对您有所帮助，来
点个赞呗！