2012-02-27 8 views
13

¿Cómo puedo cambiar el texto de una opción con jQuery?Cambiar el texto de una opción con jQuery

Me gustaría cambiar Lo nuevo con lo más viejo en una opción es un elemento <select>.

$('select option:contains("Newest")').changeText('Oldest'); 

.replaceWith no iba a funcionar para mí.

Gracias.

---- ---- Actualización

Si mi guión es el siguiente:

$('select option:contains("Newest")').text('Oldest'); 
$('select option:contains("Oldest")').text('Newest'); 

Entonces estoy cancelando el primer guión, sin embargo, eso no es lo que quiero . Tengo dos opciones, una que dice "Más reciente" que me gustaría reemplazar por "Más antigua" y otra que dice "Más antigua" que me gustaría reemplazar por "Más reciente". ¿Cómo puedo lograr eso?

+0

¿Tiene [texto()] (http://api.jquery.com/text/) no funciona para usted? –

+0

Tu sintaxis está rota. ¿Dónde encontraste el método '.changeText'? –

+0

@amnotiam Era un marcador de posición para mostrar lo que intentaba lograr – henryaaron

Respuesta

33

se debería abrir una nueva pregunta, pero aquí está la respuesta:

$('select option:contains("Newest")').text('TEMPEST'); 
$('select option:contains("Oldest")').text('Newest'); 
$('select option:contains("TEMPEST")').text('Oldest'); 
+1

Esta es una tercera consulta innecesaria de la dom. Una vez que crea un objeto jquery, mantiene la lista de elementos que coincide en el momento de la creación. Simplemente guarde los objetos jquery en una variable antes de modificar. No es necesario consultar un tiempo extra. –

+1

Me gusta la creatividad, +1 – henryaaron

2
$('select option:contains("Newest")').each(function(){ 
    var $this = $(this); 

    $this.text($this.text().replace("Newest","Oldest"));  
});​ 

http://jsfiddle.net/eSa5p/

EDIT: respuesta a la nueva pregunta:

var $newest = $('select option:contains("Newest")'); 

$('select option:contains("Oldest")').text('Newest'); 
$newest.text('Oldest'); 

http://jsfiddle.net/eSa5p/3/

+0

Gracias, ¿me pueden ayudar con la pregunta actualizada? – henryaaron

+0

respuesta actualizada. –

+0

Lamentablemente, esto no funcionó para mí, aunque hubiera sido preferible – henryaaron

0
$('select option:contains("Newest")').addClass('changeToOldest'); 
$('select option:contains("Oldest")').addClass('changeToNewest'); 
$('.changeToOldest').text('Oldest').removeClass('changeToOldest'); 
$('.changeToNewest').text('Newest').removeClass('changeToNewest'); 
+0

Está consultando el DOM 4 veces cuando dos veces es todo lo que se necesita. Una vez que crea un objeto jquery, mantiene la lista de elementos que coincide en el momento de la creación. Simplemente guarde los objetos jquery en una variable antes de modificar. No es necesario consultar un extra 2 veces, y agregar y eliminar clases innecesariamente. –

2
$("#mySelect option").html(function(i,str){ 
    return str.replace(/Newest|Oldest/g, // here give words to replace 
    function(m,n){ 
     return (m == "Newest")?"Oldest":"Newest"; // here give replacement words 
    }); 
}); 

demo: http://jsfiddle.net/diode/eSa5p/2/

Cuestiones relacionadas