如何实现嵌套树结构<select>选项缩进且选中后显示无缩进文本？

保留原生<select>的表单提交能力，用外部容器控制显示内容，步骤如下：

• 做一个外层容器，内部包含一个显示文本的<span>，再把原生<select>设为透明并覆盖在显示元素上，让用户看起来是点击显示区域触发下拉。
• 监听<select>的change事件，选中选项时提取文本中的纯内容（去掉开头的 或空格缩进），更新外层显示元素。
• 页面初始化时同步一次显示内容，保证初始状态正确。

代码示例：

<div class="custom-select-wrap">
  <span class="select-show">请选择节点</span>
  <select class="real-select">
    <option value="root">根节点</option>
    <option value="child1">&nbsp;&nbsp;一级子节点1</option>
    <option value="child2">&nbsp;&nbsp;一级子节点2</option>
    <option value="grand1">&nbsp;&nbsp;&nbsp;&nbsp;二级子节点1</option>
  </select>
</div>

<style>
.custom-select-wrap {
  position: relative;
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}
.select-show {
  display: block;
  pointer-events: none;
}
.real-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
</style>

<script>
const realSelect = document.querySelector('.real-select');
const showSpan = document.querySelector('.select-show');

function updateDisplay() {
  const selectedOpt = realSelect.options[realSelect.selectedIndex];
  // 移除开头所有空白字符（包括&nbsp;转义后的空格）
  const pureText = selectedOpt.textContent.replace(/^\s+/g, '');
  showSpan.textContent = pureText;
}

// 初始化同步
updateDisplay();
// 监听选项变化更新显示
realSelect.addEventListener('change', updateDisplay);
</script>

方案二：完全自定义下拉组件 #

如果需要更灵活的交互（比如多级折叠、自定义hover样式），可以用div/ul等元素完全模拟下拉框：

• 用一个触发按钮展示当前选中的纯文本。
• 点击按钮展开树形列表，列表项按层级添加缩进样式。
• 点击列表项时，更新触发按钮的文本，并记录选中节点的对应值（用于后续业务逻辑）。

这种方案不受原生<select>的限制，样式和交互完全可控，适合复杂的树结构场景。

补充说明 #

• 原生<select>没有提供独立设置显示文本的API，任何直接修改<select>文本内容的尝试都无效。
• 如果用Vue/React等框架，可以直接使用现成的树选择组件（如Element UI的TreeSelect、Ant Design的TreeSelect），这类组件已经内置了层级显示和选中文本格式化的功能。

内容的提问来源于stack exchange，提问作者Arcaeca