modifying select box option text in jQuery

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!

Nery Jr · Accepted Answer · 2011-10-05 02:21:33Z

10

The following simplified solution ...

<html>
<head>
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
    <script type="text/javascript" >
    function domread() {
        $('#btn').click(function(){
            $('#originalValue').attr('value', 'New Value').html('New Value');
        });
    }
    </script>
</head>
<body onload="domread()">
<select id="addSelection">
  <option id="originalValue" value="Original Value">Original Value</option>
  <option value="Two Value">Value two</option>
  <option value="Three Value">Value three</option>
</select>
<br/>
<input id="btn" type="button" value="Changes"></input>
</body>
</hmtl>

answered Oct 5, 2011 at 2:21

Nery Jr

4,0271 gold badge28 silver badges24 bronze badges

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

Comments

Chris Pratt · Accepted Answer · 2011-10-04 16:52:47Z

8

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');
});

answered Oct 4, 2011 at 16:52

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

2 Comments

risingTide Over a year ago

This is very helpful; thanks. A couple questions however. 1) Is .text() or .html() the preferred way of doing this? 2) Is option.attr('value', 'New Value') or [as genesis wrote below] option.val('NewValue') the preferred way of doing this?

Chris Pratt Over a year ago

It's mostly stylistic as far as this example is concerned. There's no functional difference between option.val() and option.attr('value'), but since calling .val() on the select actually affects which option is selected rather than the actual value of the option, I went with attr('value') to be more explicit. .text() and .html() are interchangeable depending on whether you're adding HTML in the contents or not. Since there's no HTML, I went with .text(), but .html() will still work even if there's no HTML.

Nery Jr · Accepted Answer · 2011-10-04 17:36:11Z

6

Considering the following file. html:

<html>
<head>
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</head>
<body>
<select id="addSelection">
  <option value="Original Value">Original Value</option>
  <option value="Original Value">Value two</option>
</select>
<br/>
<input id="btn" type="button" value="Changes"></input>
</body>
</hmtl>

The following javascript code with jquery to solve the problem:

$('#btn').click(function(){
    var $option = $('#addSelection option:contains("Original Value")');
    $option.attr('value', 'New Value');
    $option.html('New Value');
});

answered Oct 4, 2011 at 17:36

Nery Jr

4,0271 gold badge28 silver badges24 bronze badges

2 Comments

Chris Pratt Over a year ago

The OP accepted my answer, so it's a moot point. But seriously? Did you really just copy my answer and change '#mybutton' to '#btn' and '$option.text' to '$option.html'. Other than that, it's a complete copy-paste job, and I find it hard to believe that you just happened to do that on your own from scratch by accident.

Nery Jr Over a year ago

I apologize. It was not my intention to generate a new answer, the only correct answer is that chrisdpratt with errors (bugged). My intention was to leave an answer that you could use without spending time fixing something that was voted correctly, but that did not work in full. The code changes were implemented to test for and correct. Took the opportunity to test alternatives such as. Html () instead of. Text () proposed by Genesis-φ. I am a new user and had no intention of stealing the soluçãodo chrisdpratt, just fix it and leave it testable (hence the code. html).

genesis · Accepted Answer · 2011-10-04 16:48:41Z

2

You were on the right way with .val()

var option = $("#addSelection option");
option.val('New Value');
option.html('New Value');

answered Oct 4, 2011 at 16:48

genesis

51.1k20 gold badges99 silver badges127 bronze badges

1 Comment

risingTide Over a year ago

Perfect. I didn't have the third line with the .html...that's the part I was missing. Thanks!

iThink · Accepted Answer · 2011-10-04 16:51:38Z

0

$("option[value='New Value']").html("Another value");

answered Oct 4, 2011 at 16:51

iThink

1,2573 gold badges14 silver badges34 bronze badges

Comments

James Johnson · Accepted Answer · 2011-10-04 16:59:15Z

0

To change the selection option:

$("#addSelection").find(":selected").text("foo");

$("#addSelection").find(":selected").attr("value", "foo");

$("#addSelection").find(":selected").html("foo");

To change a particular option (not necessarily the selected option):

$("#addSelection option[value='Original Value']").text("foo");

$("#addSelection option[value='Original Value']").html("foo");

edited Oct 4, 2011 at 16:59

answered Oct 4, 2011 at 16:52

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

1 Comment

Chris Pratt Over a year ago

That will simply set the currently selected option, not the value attribute of the option.

msanford · Accepted Answer · 2017-08-04 15:16:22Z

0

Use this to just update selected text

$('#dropdown option:selected').text('whatever');

Use this to update select value

$('#dropdown option:selected').val('whatever');

edited Aug 4, 2017 at 15:16

msanford

12.4k13 gold badges73 silver badges100 bronze badges

answered Aug 4, 2017 at 14:57

Geoff

211 bronze badge

Collectives™ on Stack Overflow

modifying select box option text in jQuery

7 Answers 7

Comments

2 Comments

2 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

2 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related