CODEWITHSUNDEEP
javascriptjquery
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

Why display SELECT value is not changing?

When the page load, I expected <option value="B">B</option> value to change to red. It didn't work. Why?

jQuery

$(document).ready(function () {
  $('[name=HeaderFields] option[value="B"]').val('red');
});

Dropdown:

<select name="HeaderFields" style="width:60px">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Upvotes: 3

Views: 1812

Answers (4)

Tim M.
Tim M.

Reputation: 54397

val() sets the value of a form field which in a SELECT is not the same thing as the visible text. This works correctly for me in Chrome with your example by inspecting the source.

If you are looking to change the visible text, use html() or text().

See: http://jsfiddle.net/6dSQX/

Upvotes: 3

Russell Gutierrez
Russell Gutierrez

Reputation: 1385

The value change works fine. But if we assume that the font color change is what you mean, you should change your javascript to:

$(document).ready(function () {
  $('[name=HeaderFields] option[value="B"]').css('font-color', 'red');
}

Upvotes: -2

Zirak
Zirak

Reputation: 39858

In an option tag, the value property and the displayed-text are two different things.

<option value="I am sent to the server">I am displayed to the user</option>

So if you want to change the displayed-text, use jQuery's text method.

Upvotes: 2

Qpirate
Qpirate

Reputation: 2078

The Value of "B" changes to "red"

not the TEXT.

if you look at the source of the html page you should see

<option value="red">B</option>

Upvotes: 0

Related Questions