Question

Given the following HTML:

<select id="addSelection">

<option value="Original Value">Original Value</option>

</select>

I would like to change the text value of the option tag when I click on a button.

Assuming that the button click can be done correctly…how can I change the text of the option tag using jQuery?

So, for example…I would like the option tag changed to this:

<option value="New Value">New Value</option>

I’ve tried using variations of the .val() function but have not found a solution.

Thank you to all who reply!

Answer 1

Treat the option like any other piece of HTML. $option.attr('value') will give you the content of the value attribute and $option.text() or $option.html() will give you the content between the opening and closing tags.

$('#mybutton').click(function(){
    var $option = $('#addSelect option:content("Original Value")');
    $option.attr('value', 'New Value');
    $option.text('New Value');
});