Hello,
I'm having a problem with a CSS selector on <option> elements. I'm using
jQuery 1.2.6 and FireFox 3.0.4.
Here's my HTML:
<select id="theSelect">
<option>Select a color</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>
Here's my JS:
$('#theSelect').find('option[value]').each(function() {
console.log('.val(): ' + $(this).val());
console.log('.attr(): ' + $(this).attr('value'));
console.log('native: ' + this.getAttribute('value'));
});
According to the W3C specs[1], I should be able to use the selector
"option[value]" to return all options that have a value attribute.
E[foo] => an E element with a "foo" attribute
>
But jQuery is returning all of the options, including the one without a
value attribute.
The resulting log looks like this:
.val(): Select a color <-- incorrect
.attr(): Select a color <-- incorrect
native: null <-- correct
.val(): blue
.attr(): blue
native: blue
.val(): red
.attr(): red
native: red
As you can see, .val() and .attr() are returning the html contents of the
option if no value is set. This is causing a problem for a couple of
reasons:
1) It doesn't comply with the W3C spec for the CSS selector E[foo]. The
first option should not be included in the element set.
2) jQuery#val() and jQuery#attr() are both inconsistent with what the
browser would actually submit.
Am I using the selector incorrectly or would this be considered a bug in
jQuery? Thanks!
[1] http://www.w3.org/TR/css3-selectors/#selectors
-Hector
