js动态生成 select 树形下拉菜单

可以使用递归函数来实现动态生成树形下拉菜单。

首先，需要准备好一个包含树形结构数据的数组。每个节点需要包含一个值和一个子节点数组。

然后，通过递归函数来遍历数组，生成每个节点的 select 元素和子节点的 select 元素。在生成子节点的 select 元素时，需要将其嵌套在父节点的 select 元素中。

具体的实现可以参考下面的代码：

<!-- HTML结构 -->
<div id="tree"></div>

<!-- JavaScript代码 -->
<script>
  // 定义树形结构数据
  var treeData = [
    {
      value: 'A',
      children: [
        {
          value: 'A1',
          children: [
            {
              value: 'A11',
              children: []
            },
            {
              value: 'A12',
              children: []
            }
          ]
        },
        {
          value: 'A2',
          children: [
            {
              value: 'A21',
              children: []
            },
            {
              value: 'A22',
              children: []
            }
          ]
        }
      ]
    },
    {
      value: 'B',
      children: [
        {
          value: 'B1',
          children: []
        },
        {
          value: 'B2',
          children: []
        }
      ]
    }
  ];

  // 递归生成树形下拉菜单
  function generateSelectTree(data) {
    var select = document.createElement('select');
    for (var i = 0; i < data.length; i++) {
      var option = document.createElement('option');
      option.value = data[i].value;
      option.text = data[i].value;
      select.add(option);
      if (data[i].children.length > 0) {
        var childSelect = generateSelectTree(data[i].children);
        select.appendChild(childSelect);
      }
    }
    return select;
  }

  // 将生成的树形下拉菜单添加到页面中
  var tree = document.getElementById('tree');
  tree.appendChild(generateSelectTree(treeData));
</script>

这样就可以生成一个包含树形结构的下拉菜单了。