Как укоротить только выбранный текст выпадающего меню с помощью JQuery

Question

У меня есть раскрывающийся

<div> 
<select id="ddlTruncate"> 
    <option selected="selected">Select </option>  
    <option value="1">tetetetetetetet </option> 
    <option value="2">tetetetetetetetetetete </option> 
    <option value="3">tetetetetettetete </option>   
</select> 
</div> 

Я хочу усечь только выбранное значение, и если значение приобретает изменение предыдущего значения должны показать исходное значение

$('#ddlTruncate').change(function() { 
    var textval = $('#ddlTruncate :selected').text(); 
    var ddlval= $(this).val(); 
     if(textval.length > 5) {  
      $('#ddlTruncate :selected').text(textval.substr(0,4)+'…'); 
     } 
}); 

В настоящее время, когда я выбираю любой другой вариант, тогда предыдущее значение показывает преломление до исходного значения. Пожалуйста, проверьте ссылку http://jsfiddle.net/hurera1111/6x039o7w/

Answer 1

Обновлено fiddle здесь для вас.

магазин фактический текст в data-text для option, то на изменение, изменить текст всех options но не :selected один.

Answer 2

Позвольте мне объяснить, что .. 1- Хранить фактический текст в атрибуте, называемом data-text, до того, как substr это ... 2- цикл через все варианты текста, но не выбран, а не первый-ребенок, используя :not(":selected,:first-child") селектор ... 3 - если текст другого варианта текст соответствует выбранному тексту изменить предыдущую сохраненные данные из данных текста

$('#ddlTruncate').on('change',function() { 
    var textval = $('#ddlTruncate :selected').text(); 
    var ddlval= $(this).val(); 
     if(textval.length > 5) { 
      $('#ddlTruncate :selected').attr('data-text',textval); 
      $('#ddlTruncate :selected').text(textval.substr(0,4)+'…'); 
      var newtext = $('#ddlTruncate :selected').text(); 
      $('#ddlTruncate option:not(":selected,:first-child")').each(function(){ 
       if($(this).text() == newtext){ 
        $(this).text($(this).attr('data-text')); 
       } 
      }); 
     } 
}); 

DEMO