layui-树形下拉选择器

官网地址：https://fly.layui.com/extend/treeSelect/

效果：

使用示例

<input type="text" id="tree" lay-filter="tree" class="layui-input">

js

<script>
    layui.use(['treeSelect','form'], function () {
        var treeSelect= layui.treeSelect;
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: 'data/data3.json',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '修改默认提示信息',
            // 是否开启搜索功能：true/false，默认false
            search: true,
           style: {
                   folder: 
          { // 父节点图标
                   enable: true // 是否开启：true/false
                  },
                   line: 
              { // 连接线
                       enable: true // 是否开启：true/false
                   }
       },
            // 点击回调
            click: function(d){
                console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {
            //选中节点，根据id筛选
            //treeSelect.checkNode('tree', 3);
            //获取zTree对象，可以调用zTree方法
            //var treeObj = treeSelect.zTree('tree');
            //刷新树结构
            //treeSelect.refresh();
            }
        });
    });
</script>

实际使用post方法

  treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/api/XX/XX',
            // 异步加载方式：get/post，默认get
            type: 'post',
            // 占位符
            placeholder: '',
            // 是否开启搜索功能：true/false，默认false
            search: false,
        　　style:{
        　　folder:{enable: false},
        　　line:{enable: true}
        　　},
            // 点击回调
            click: function(d){
                $('#tree').val(d.current.code);
            },
            // 加载完成后的回调函数
            success: function (d) {
            //选中节点，根据id筛选
            //treeSelect.checkNode('tree', 3);            
            }
        });