1.目标需求

1.在layUI框架下，做出树节点下拉框

image.png

2.实现步骤

1.html代码

<div class="layui-form-item">
    <label class="layui-form-label">所属上级</label>
    <div class="layui-input-block">
      <div class="layui-form-select downpanel">
        <div class="layui-select-title"><input id="chooseName" type="text" placeholder="请选择所属上级" value="" class="layui-input"><input type="hidden" id="chooseID"><i
            class="layui-edge"></i></div>
        <dl class="layui-anim layui-anim-upbit">
          <dd>
            <div id="test13" class="demo-tree-more"></div>
          </dd>
        </dl>
      </div>
    </div>
  </div>

2.js代码

//树节点数据
  var data1 = [{
    title: '江西',
    id: 1,
    children: [{
      title: '南昌',
      id: 1000,
      children: [{
        title: '青山湖区',
        id: 10001
      }, {
        title: '高新区',
        id: 10002
      }]
    }, {
      title: '九江',
      id: 1001
    }, {
      title: '赣州',
      id: 1002
    }]
  }, {
    title: '广西',
    id: 2,
    children: [{
      title: '南宁',
      id: 2000
    }, {
      title: '桂林',
      id: 2001
    }]
  }, {
    title: '陕西',
    id: 3,
    children: [{
      title: '西安',
      id: 3000
    }, {
      title: '延安',
      id: 3001
    }]
  }];
  layui.use(['admin', 'table', 'laydate', 'layarea', 'tree', 'util'], function () {
    var $ = layui.$;
    var tree = layui.tree;
    var util = layui.util;
    tree.render({
      elem: '#test13',
      data: data1,
      click: function (obj) {
        console.log(obj.data); //得到当前点击的节点数据
        $("#chooseName").val(obj.data.title);
        $("#chooseID").val(obj.data.id);
      }
    });
    //下拉交互显示
    $(".downpanel").on("click", ".layui-select-title", function (e) {
      $(".downpanel").not($(this).parents(".downpanel")).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) {
      $(".downpanel").removeClass("layui-form-selected");
    });
  })

layUI 框架引用就不说了，此处js代码引用了蛮多多余的layUI模块（可酌情引用），主要原理是结合form模块下的select组件和tree模块，达到下拉显示树节点的效果，