Sadece seçili moddayken seçili bir seçenek için metin değiştirme

Question

Yukarıdaki başlığı taşıyan herkesi şaşırtıp karıştırmadığımdan emin değilim. Benim sorunum şu şekildedir.

Kodum için standart javascript (no jQuery) ve HTML kullanıyorum. Gereksinim, <select>...</select> menüsü için, değişken uzunluktaki bir dinamik listeye sahip olduğum.

option[selectedIndex].text > 43 karakterlerinin uzunluğunu şimdi option[selectecIndex] yeni bir metne değiştirmek istiyorum.

Ben çalışıyor onChange olay

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

arayarak bunu yapmak mümkün duyuyorum. Buradaki konu, kullanıcının seçimi değiştirmeye karar vermesidir, açılan liste değişmiş metin ile geçirilen seçilmiş metni gösterir. Bu orjinal listeyi göstermelidir.

Stumped! Bunu yapmanın daha basit bir yolu var mı?

Herhangi bir yardım harika olurdu.

Teşekkür

Answer 1

Bazı verilerin özelliğinde önceki metin değeri depolamak ve gerektiğinde geri metni sıfırlamak için kullanabilirsiniz:

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

Sen jquery ile oldukça basit bir şekilde yapabilirsiniz. İşte http://jsfiddle.net/kb7CW/1/

da bunun için komut edilir: Burada bir çalışma keman olduğunu

 //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; 

});