CODEWITHSUNDEEP
jqueryformstexthtml-select
GCW
GCW

Reputation: 312

change the content of a select option

I'd like to change the text shown in a select form, without changing the HTML elements. This is an example:

<select class="myclass" name="myselect">
   <option value="0">1</option>
   <option value="1">2</option>
</select>

I would like to change the "2" string into "TWO", for example, like:

<option value="1">TWO</option>

I'm not able to select the right option inside $('.myclass') and then use the text() function on it.

Upvotes: 1

Views: 158

Answers (2)

user4982150
user4982150

Reputation:

You can use the last-child selector and self-invoke the function using (function(){})(); to change the value of second option as soon as the DOM is loaded.

(function(){
   $('.myclass option:last-child').text("two");  
})();

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

If you specifically know that you want to change the second option element within the select, you can target it with :eq():

$('.myclass option:eq(1)').text('TWO');

Note that eq() works on a zero-based index, so 0 is the first element, 1 is the second and so on.

Upvotes: 2

Related Questions