縮短選擇選項列表中的選定選項

Question

如何在使用jQuery/JS的選擇中縮短文本？例如在下面的選擇我只想顯示字母「G」：

與此相反：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;"> 

Answer 1

我不知道如果我理解正確的，你想做的事，但如果你想直接縮短選項的文字，這裏的你可以做什麼：

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

如果你只是想改變它在視覺上，你可以把一個特定的寬度使用max-width您選擇的元素上。

Answer 2

這將是一個CSS的解決方案，但將最大寬度的選擇框應該做的伎倆：

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

jsfiddle

如果你堅持的jQuery：

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