Question

I’ll just start by presenting code that doesn’t behave like it should. As it’s very simple it should speak for itself.

HTML:

<input id="bla"></input>
<input id="blub"></input>

JavaScript:

jQuery('#bla').attr({'value': 'a'});
jQuery('input[value="a"]').val('s');

jQuery('#blub').val('d');
jQuery('input[value="d"]').val('f');

jsFiddle: http://jsfiddle.net/5dww7/

Problem: jQuery('input[value="d"]') is undefined

Is this a bug? Firebug actually say that the “value” exists – so maybe a problem with the selector?

Answer 1

When you use val you are changing the value property. When you use attr you are changing the attribute.

As you then use an attribute selector to select the element, it will only work if the attribute is present.

If you need to select elements based on the value of their value property you could use filter:

$("input").filter(function() {
    return this.value === "whatever"; //Accesses the value property
});