jquery显示一个选择框文本，而不是选择的内容答案

【问题标题】：jquery show a select box text other then what is selectedjquery显示一个选择框文本，而不是选择的内容
【发布时间】：2017-02-08 12:48:11
【问题描述】：

我有一组分层的选择选项，以字符串空格开头，在我的选择框选项中提供缩进。我想在选择器中选择时显示带有空格的所选选项，但是在选择选择后，我希望所选选项的空格消失，仅在再次选择时重新出现。我可以按如下方式完成前半部分：

$('#mySelect').change(function() {
 $("option:selected", this).text($("option:selected",this).text().trim());
});

这是简化后的 html 的样子

<select id="mySelect">
 <option>root</option>
 <option>&nbsp;&nbsp;nested_one</option>
 <option>&nbsp;&nbsp;nested_two</option>
 <option>another root</option>
 <option>&nbsp;&nbsp;nested_other</option>
</select>

我不确定如何将其设置回原来的前导空格数量。我可以将这个数量的空格存储在一个变量中（连同选项 val/id）并在 on change 中查找并替换它，但即使这样也不是很理想，因为我想触发缩进值在你打开时出现选择选项，然后单击一个。 .click 似乎会在打开和关闭时触发，这将起作用，除非您仅通过键盘导航，在这种情况下它根本不会触发。打开选择以查看选项时是否有可靠的事件？

也许我说错了，有什么聪明的主意吗？

【问题讨论】：

你有图片吗？设计？还是html？只是为了更好地说明你的想法
当然，我添加了选择框html，或者它的简化版本来演示。基本上，我希望在选择不带空格的选项文本后可见（）。修剪适用于此，但我想在打开选择框时立即将它们添加回来（但不要等待它再次更改/单击）。
如果您选择了某个选项，然后将类添加到该选项并在您的 CSS 中调用该类以在其上留出空格，该怎么办？
有趣的想法，我可能有一个跨度，上面有一个围绕的类。并使其显示：none if selected，这是一个很酷的想法，当您打开选择器删除类时仍然不能完全处理，因为我不知道有一个一致的事件，但它是一种很酷的方法。 ++
您可以在选择该选项时在jQuery中进行制作，第一，您删除所有选项类，然后将类添加到该选项中。如果你愿意，我可以尝试做一个例子

标签： jquery select

【解决方案1】：

好的，这似乎在 Ubuntu 上的 firefox 和 chrome 中运行良好，尽管我怀疑它是否能在所有浏览器上运行良好，因为我怀疑重叠输入将始终排列/显示正确，到目前为止一切都很好不过：

HTML

<select id="mySelect" style="position: absolute; width: 300px;">
 <option>root</option>
 <option>&nbsp;&nbsp;nested_one</option>
 <option>&nbsp;&nbsp;nested_two</option>
 <option>another root</option>
 <option>&nbsp;&nbsp;nested_other</option>
</select>

<select id="mySelectOverlay" style="position: absolute; width: 300px; z-index: 100; pointer-events: none;">
  <option>root</option>
</select>

jQuery

$('#mySelect').change(function() {
 var trimmed = $("option:selected", this).text().trim();
 $("option:selected", $('#mySelectOverlay')).text(trimmed);
});

这可能会在某些浏览器中中断和/或不是最佳解决方案，但它似乎可以完成这项工作。

【讨论】：