缩短选择选项列表中的选定选项

如何在使用jQuery/JS的选择中缩短文本？例如在下面的选择我只想显示字母“G”：缩短选择选项列表中的选定选项

select problem

与此相反：Shorten long options in a select options list我想只缩短选定的文本没有弹出列表中的所有选项。

UPDATE（问题来源）：

我发现问题出在哪里了。 SELECT元素（在图中）位于表格的页脚TH中，其具有word-wrap:break-word;。所以这个选项是从TH继承的。

所以最后我选择了沃尔坎Ulukut与正常的包装解决方案：

<select id="currencies" name="currencies" style="max-width:35px; word-wrap: normal;">

2014-02-12 Michal

我不知道如果我理解正确的，你想做的事，但如果你想直接缩短选项的文字，这里的你可以做什么：

$('#your-select option').text(function (i, text) { 
    return text[0]; //shorten text to the first letter 
});

如果你只是想改变它在视觉上，你可以把一个特定的宽度使用max-width您选择的元素上。

2014-02-12 13:10:13 plalx

该解决方案帮助。我忘了在我的问题中说，我使用了最大宽度的CSS选项，但它只改变了组件的宽度，但没有选中文本（如附图所示）。但是，Volkan Ulukut的例子在jsfiddle中可以正常工作。 – Michal

这将是一个CSS的解决方案，但将最大宽度的选择框应该做的伎俩：

<select id="currencies" name="currencies" style="max-width:35px;"> 
    <option value=gs>GBP</option> 
</select>

如果你坚持的jQuery：

$("#currencies").css("max-width","35px");

2014-02-12 13:11:36

回答