layui的树形下拉框怎么写
时间: 2023-06-29 08:09:27 浏览: 108
layui组件之树形下拉框
5星 · 资源好评率100%
可以使用 layui 的 tree 模块来实现树形下拉框。具体的实现步骤如下:
1. 引入 layui 的样式文件和 JS 文件
```html
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
```
2. 编写 HTML 代码
```html
<div class="layui-form-item">
<label class="layui-form-label">树形下拉框</label>
<div class="layui-input-block">
<select name="tree" lay-filter="tree">
<option value="">请选择</option>
</select>
</div>
</div>
```
3. 编写 JS 代码
```javascript
// 渲染树形下拉框
layui.tree({
elem: '#layui-form-item select',
nodes: [
{
title: '一级节点1',
id: 1,
children: [
{
title: '二级节点1-1',
id: 2
},
{
title: '二级节点1-2',
id: 3
}
]
},
{
title: '一级节点2',
id: 4,
children: [
{
title: '二级节点2-1',
id: 5
},
{
title: '二级节点2-2',
id: 6
}
]
}
],
click: function(node) {
// 点击回调函数
console.log(node);
}
});
```
其中,`nodes` 属性表示树形数据,`click` 属性表示点击节点的回调函数。需要注意的是,`lay-filter` 属性需要设置为 `tree`,以便于 layui 自动渲染树形下拉框。
阅读全文