树形图select框 原生js

以下是一个使用原生 JavaScript 实现树形选择框的示例代码：

HTML：

<div id="tree-select">
  <select id="tree-select-options">
    <option value="">请选择</option>
  </select>
</div>

JavaScript：

var treeData = [
  {
    id: 1,
    label: "节点1",
    children: [
      {
        id: 11,
        label: "节点1-1",
        children: [
          {
            id: 111,
            label: "节点1-1-1",
          },
          {
            id: 112,
            label: "节点1-1-2",
          },
        ],
      },
      {
        id: 12,
        label: "节点1-2",
      },
    ],
  },
  {
    id: 2,
    label: "节点2",
    children: [
      {
        id: 21,
        label: "节点2-1",
      },
      {
        id: 22,
        label: "节点2-2",
      },
    ],
  },
];

var selectOptions = document.getElementById("tree-select-options");

function generateTreeSelectOptions(data, level) {
  for (var i = 0; i < data.length; i++) {
    var option = document.createElement("option");
    option.value = data[i].id;
    option.text = "　".repeat(level) + data[i].label;
    selectOptions.appendChild(option);
    if (data[i].children) {
      generateTreeSelectOptions(data[i].children, level + 1);
    }
  }
}

generateTreeSelectOptions(treeData, 0);

该示例代码中，首先定义了一个树形数据 `treeData`，其中每个节点包含 `id` 和 `label` 属性，以及可能存在的 `children` 子节点。然后在 HTML 中定义了一个 `select` 元素，用于展示树形选择框。

接下来，在 JavaScript 中定义了一个 `generateTreeSelectOptions` 函数，用于生成树形选择框的选项。该函数接受两个参数：树形数据 `data` 和当前节点的层级 `level`。函数使用循环遍历树形数据，将每个节点作为一个选项添加到 `select` 元素中，并通过递归调用自身生成子节点的选项。

最后，在主函数中调用 `generateTreeSelectOptions` 函数，传入树形数据和初始层级 0。这样就可以生成一个树形选择框了。