layui的树形select
时间: 2023-08-08 07:12:32 浏览: 54
Layui的树形select组件可以通过lay-filter属性来实现,具体步骤如下:
1. 引入Layui和jquery库文件。
2. 在html中定义一个div容器,在其中添加一个select元素,并设置id和lay-filter属性。
3. 在js中使用layui的tree组件初始化生成一个树形结构的数据,然后将其渲染到select中。
4. 监听select的change事件,获取选中的值并进行相应的操作。
具体代码如下:
HTML代码:
```html
<div id="treeSelect">
<select id="selectTree" lay-filter="treeSelect"></select>
</div>
```
JS代码:
```javascript
layui.use(['layer', 'form', 'tree'], function(){
var layer = layui.layer;
var form = layui.form;
var tree = layui.tree;
//模拟数据
var data = [{
title: '一级节点1'
,id: 1
,children: [{
title: '二级节点1-1'
,id: 2
,children: [{
title: '三级节点1-1-1'
,id: 3
},{
title: '三级节点1-1-2'
,id: 4
}]
},{
title: '二级节点1-2'
,id: 5
}]
},{
title: '一级节点2'
,id: 6
,children: [{
title: '二级节点2-1'
,id: 7
},{
title: '二级节点2-2'
,id: 8
}]
}];
//渲染树形结构
tree.render({
elem: '#selectTree',
data: data,
click: function(obj){
//监听选中事件
var node = obj.data;
console.log(node.title + '被选中');
}
});
});
```
通过以上代码,就可以实现一个简单的树形select组件了。