Change the Text of a Option with jQuery

Question

How can I change the text of an option with jQuery?

I'd like to change Newest with Oldest in an option is a <select> element.

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

.replaceWith would not work for me.

Thanks.

----Update----

If my script looks like this:

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

Then I'm canceling out the first script, however, that isn't what I want. I have two options one that reads "Newest" which I'd like to replace with "Oldest" and one that reads "Oldest" which I'd like to replace with "Newest". How can I accomplish that?

Your syntax is broken. Where did you find the .changeText method? — user1106925
– user1106925, Commented Feb 27, 2012 at 1:43
@amnotiam It was a placeholder to display what I was trying to accomplish — henryaaron
– henryaaron, Commented Feb 27, 2012 at 1:44
Use the method @XavierHolt pointed out, but fix your syntax by either removing the inner single quotes, changing them to double quotes, or escaping them. — user1106925
– user1106925, Commented Feb 27, 2012 at 1:45

qwertymk · Accepted Answer · 2012-02-27 02:34:56Z

58

You should start a new question but here's the answer:

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

answered Feb 27, 2012 at 2:34

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Montagne Over a year ago

This is an unneeded 3rd query of the dom. Once you create a jquery object, it maintains the list of elements that it matched at the time of creation. Simply save the jquery objects to a variable before modifying. No need to query an extra time.

James Montagne · Accepted Answer · 2012-02-27 20:17:45Z

5

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

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

http://jsfiddle.net/eSa5p/

EDIT: Answer to the new question:

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

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

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

edited Feb 27, 2012 at 20:17

answered Feb 27, 2012 at 1:45

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

1 Comment

henryaaron Over a year ago

Unfortunately, this did not work for me, although it would've been preferred

Diode · Accepted Answer · 2012-02-27 08:22:43Z

3

$("#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/

edited Feb 27, 2012 at 8:22

answered Feb 27, 2012 at 7:48

Diode

25.2k8 gold badges43 silver badges52 bronze badges

Comments

winbill · Accepted Answer · 2018-07-08 14:41:59Z

3

Change text of the selected option:

$("#select").find("option:selected").text('Newest');

answered Jul 8, 2018 at 14:41

winbill

311 bronze badge

Comments

TripathyC · Accepted Answer · 2021-01-28 13:23:01Z

3

You can do that by a simple script

$("option[value=optionvalue]").html('New text');

edited Jan 28, 2021 at 13:23

answered Jan 28, 2021 at 13:11

TripathyC

715 bronze badges

Comments

mVChr · Accepted Answer · 2012-02-27 05:05:39Z

0

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

answered Feb 27, 2012 at 5:05

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

1 Comment

James Montagne Over a year ago

You are querying the DOM 4 times when twice is all that is needed. Once you create a jquery object, it maintains the list of elements that it matched at the time of creation. Simply save the jquery objects to a variable before modifying. No need to query an extra 2 times, and add and remove classes unnecessarily .

Collectives™ on Stack Overflow

Change the Text of a Option with jQuery

----Update----

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

----Update----

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related