Question

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

$('#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）并在更改中查找并替换它，但即使这样也不太理想，因为我想触发打开时出现的缩进值选择选项，然后单击一个。 .click似乎在打开和关闭时触发，这将起作用，除非您通过键盘导航，在这种情况下它根本不会触发。打开选项以查看选项时是否有可靠的事件？

也许我会发现这个错误，任何聪明的想法？

Answer 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);
});

这可能会破坏某些浏览器和/或不是最佳解决方案，但似乎可以胜任。

jquery显示除选择内容之外的选择框文本

1 个答案: