Zmiana tekstu dla wybranej opcji tylko wtedy, gdy jest w wybranym trybie.

Question

Nie jestem pewien, czy pomyliłem wszystkich z powyższym tytułem. Mój problem jest następujący.

Używam standardowego javascript (bez jQuery) i HTML dla mojego kodu. Wymaga to, że dla menu <select>...</select> mam dynamiczną listę o różnej długości.

Teraz, jeśli długość znaków option[selectedIndex].text > 43, chcę zmienić option[selectecIndex] na nowy tekst.

Jestem w stanie to zrobić dzwoniąc

this.options[this.selectedIndex].text = "changed text"; 

w przypadku onChange który działa dobrze. Problem polega na tym, że gdy użytkownik zdecyduje się na zmianę wyboru, lista rozwijana pokazuje poprzedni-zaznaczony tekst ze zmienionym tekstem. To musi pokazać oryginalną listę.

Jestem zaskoczony! czy jest prostszy sposób na zrobienie tego?

Każda pomoc będzie świetna.

Dzięki

Answer 1

można zapisać poprzednią wartość tekstową w jakiś atrybut danych i używać go zresetować tekst z powrotem, gdy konieczne:

document.getElementById('test').onchange = function() { 

    var option = this.options[this.selectedIndex]; 

    option.setAttribute('data-text', option.text); 
    option.text = "changed text"; 

    // Reset texts for all other options but current 
    for (var i = this.options.length; i--;) { 
     if (i == this.selectedIndex) continue; 
     var text = this.options[i].getAttribute('data-text'); 
     if (text) this.options[i].text = text; 
    } 
}; 

http://jsfiddle.net/kb7CW/

Answer 2

Można to zrobić bardzo prosto z jQuery. Oto skrzypce robocze: http://jsfiddle.net/kb7CW/1/

Oto skrypt do niego także:

 //check if the changed text option exists, if so, hide it 
$("select").on('click', function(){ 
    if($('option#changed').length > 0) 
    { 
     $("#changed").hide() 
    } 
}); 
//bind on change 
$("select").on('change', function(){ 
    var val = $(":selected").val(); //get the value of the selected item 
    var text = $(':selected').html(); //get the text inside the option tag 
    $(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex 
    if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right 
      $(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>'); 
    else 
     $('#changed').val(val) //if it already exists, change its value 

    $(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected; 

});