Сократить выбранную опцию в списке опций выбора

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");