更改<option>元素文本的显示值而无需修改元素本身

Question

我有一个<select>元素，它具有递归生成的选项列表，如下所示：

当以这种方式显示在页面上时看起来不错，但是我想知道是否有一种方法可以更改显示在主要<select>元素上的文本值。例如，如果我选择“ CategoryE”，则显示的文本如下所示：

从逻辑上讲，这是可以预期的，但是如您所见，所选文本保留其前导空白并且看起来很乱。我正在尝试一种trim()效果，该效果仅在选中显示值时才会更改，但会将空白保留在实际的<option>列表中，以便您仍可以在其中看到类别与其他类别的关系选项树。

不幸的是，此代码同时更改了两者：

$("select").on("change", function() {
    var selected = $(this).children(":selected");
    var text = $(selected).text().trim();
    $(selected).html(text);
});

是否可以在不保存和还原前导空白的情况下完成我想要的工作，还是我必须求助于此？

Answer 1

此解决方案很笨拙，可能有跨浏览器的责任，但不能完全确定您确实有什么选择。

您可以将<select>包裹在一个容器中，并为其兄弟姐妹<span>。

该跨度可能会覆盖所选文本，因此不会显示。要维持选择功能，您只需应用pointer-events: none，以便鼠标的行为就像<span>不在那里一样。

$("select").on("change", function() {
  var $selected = $(this).children(":selected");
  var text = $selected.text().trim();
  $(this).siblings("span").text(text);
});

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

.container > span {
  position: absolute;
  top: 3px;
  left: 2px;
  padding-left: 3px;
  pointer-events: none;
  background-color: white;
  width: calc(100% - 22px);
}

select, span { font-size: 14px; font-family: Arial; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span>One</span>
  <select>
    <option>One</option>
    <option>&nbsp;&nbsp;Two</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;Three</option>
  </select>
</div>