用ejs +jquery+js+原生htmlselect实现下拉树

下拉树是一种常见的树形选择控件，可以在下拉框中展示树形结构，用户可以通过下拉框选择树形节点。在实现下拉树时，可以使用ejs模板引擎、jQuery库、JavaScript和原生HTML Select元素。

首先，在HTML文件中创建一个下拉框，并给该下拉框设置id，如下所示：

<select id="tree-select"></select>

接下来，使用ejs模板引擎创建下拉树节点的模板，如下所示：

<% function renderTree(data) { %>
  <% for (var i = 0; i < data.length; i++) { %>
    <option value="<%= data[i].id %>"><%= data[i].name %></option>
    <% if (data[i].children && data[i].children.length > 0) { %>
      <% renderTree(data[i].children); %>
    <% } %>
  <% } %>
<% } %>

该模板使用递归方式，遍历树形结构的每个节点，并将节点渲染成下拉框的一个选项。

接下来，使用jQuery库来获取下拉框，并在下拉框中渲染树形结构。具体实现如下所示：

$(function() {
  // 模拟树形结构数据
  var treeData = [
    {
      id: 1,
      name: '节点1',
      children: [
        {
          id: 2,
          name: '节点1-1',
          children: [
            {
              id: 3,
              name: '节点1-1-1'
            },
            {
              id: 4,
              name: '节点1-1-2'
            }
          ]
        },
        {
          id: 5,
          name: '节点1-2'
        }
      ]
    },
    {
      id: 6,
      name: '节点2'
    }
  ];

  // 获取下拉框元素
  var $select = $('#tree-select');

  // 渲染树形结构到下拉框中
  renderTree(treeData, $select);

  // 定义渲染树形结构的函数
  function renderTree(data, $select) {
    var html = '';
    for (var i = 0; i < data.length; i++) {
      html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
      if (data[i].children && data[i].children.length > 0) {
        renderTree(data[i].children, $select);
      }
    }
    $select.append(html);
  }
});

上述代码首先定义了一个模拟的树形结构数据，然后获取下拉框元素，并调用渲染树形结构的函数将树形结构渲染到下拉框中。渲染函数中使用了递归方式来遍历树形结构的每个节点，并将节点渲染成下拉框的一个选项。

最后，将上述代码保存为HTML文件并在浏览器中打开该文件，即可看到渲染出来的下拉树。