किसी चयनित विकल्प के लिए केवल टेक्स्ट बदलते समय जब यह चयनित मोड

Question

में मुझे यकीन नहीं है कि मैंने उपरोक्त शीर्षक वाले सभी को भ्रमित कर दिया है। मेरी समस्या इस प्रकार है।

मैं अपने कोड के लिए मानक जावास्क्रिप्ट (कोई jQuery) और HTML का उपयोग कर रहा हूं। आवश्यकता यह है कि <select>...</select> मेनू के लिए, मेरे पास अलग-अलग लंबाई की गतिशील सूची है।

अब option[selectedIndex].text > 43 अक्षरों की लंबाई, मैं option[selectecIndex] को एक नए पाठ में बदलना चाहता हूं।

मैं

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

onChange घटना है जो ठीक काम करता है में

को फोन करके यह करने के लिए कर रहा हूँ। एक बार जब उपयोगकर्ता चयन को बदलने का फैसला करता है, तो ड्रॉपडाउन सूची बदले गए पाठ के साथ व्यापक-चयनित-पाठ दिखा रही है। इसे मूल सूची दिखाने की जरूरत है।

मैं स्टंप हो गया हूँ! क्या ऐसा करने का एक आसान तरीका है?

कोई भी मदद महान होगी।

धन्यवाद

Answer 1

आप कुछ डेटा विशेषता में पिछले पाठ मान संग्रहीत और उसका उपयोग वापस जब आवश्यक पाठ रीसेट करने के लिए कर सकते हैं:

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

आप jQuery के साथ सुंदर बस यह कर सकते हैं। http://jsfiddle.net/kb7CW/1/

यहाँ है इसके लिए स्क्रिप्ट:: यहाँ एक काम बेला है

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

});