Question

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>

Answer 1

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/