CODEWITHSUNDEEP
jqueryhtml-select
risingTide
risingTide

Reputation: 1896

modifying select box option text in jQuery

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!

Upvotes: 4

Views: 13434

Answers (7)

Geoff
Geoff

Reputation: 11

Use this to just update selected text

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

Use this to update select value

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

Upvotes: 0

Nery Jr
Nery Jr

Reputation: 4009

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>

Upvotes: 10

Nery Jr
Nery Jr

Reputation: 4009

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

Upvotes: 6

James Johnson
James Johnson

Reputation: 46067

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");

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239440

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

Upvotes: 8

iThink
iThink

Reputation: 1259

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

Upvotes: 0

genesis
genesis

Reputation: 50982

You were on the right way with .val()

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

Upvotes: 2

Related Questions