html 树形下拉多选

你可以使用HTML、CSS和JavaScript来创建一个树形下拉多选框。下面是一个简单的实现示例：

HTML代码：

<div class="dropdown">
  <button class="dropbtn">选择</button>
  <div class="dropdown-content">
    <ul id="tree">
      <li>
        <input type="checkbox" id="node1" />
        <label for="node1">节点1</label>
        <ul>
          <li>
            <input type="checkbox" id="node11" />
            <label for="node11">节点1-1</label>
          </li>
          <li>
            <input type="checkbox" id="node12" />
            <label for="node12">节点1-2</label>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="node2" />
        <label for="node2">节点2</label>
        <ul>
          <li>
            <input type="checkbox" id="node21" />
            <label for="node21">节点2-1</label>
          </li>
          <li>
            <input type="checkbox" id="node22" />
            <label for="node22">节点2-2</label>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CSS代码：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 8px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-content li {
  position: relative;
}

.dropdown-content input[type="checkbox"] {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
}

.dropdown-content label {
  display: block;
  padding: 8px 30px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

JavaScript代码：

const tree = document.getElementById('tree');
const checkboxes = tree.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', (event) => {
    const isChecked = event.target.checked;
    const subCheckboxes = event.target.parentNode.querySelectorAll('input[type="checkbox"]');

    subCheckboxes.forEach((subCheckbox) => {
      subCheckbox.checked = isChecked;
    });

    if (isChecked) {
      event.target.parentNode.querySelectorAll('ul input[type="checkbox"]').forEach((subCheckbox) => {
        subCheckbox.checked = true;
      });
    }
  });
});

这个示例使用了一个嵌套的ul列表来表示树形结构，每个节点都有一个复选框和一个标签。其中，复选框用于表示节点的选中状态，标签用于显示节点的名称。当用户点击复选框时，JavaScript代码会递归地设置所有子节点的选中状态。当用户选中一个节点时，JavaScript代码还会自动选中所有子节点。最后，当用户点击“选择”按钮时，下拉框会展开并显示树形结构。