Scenario:
I got 2 jQuery expressions:
/* A */ $('select').find('option[selected]');
/* B */ $('select').find('option').filter('[selected]');
which mean (let's assume there's only one select
in the document, for simplicity):
- A: Get the
select
, then find alloption
descendants that has an attribute namedselected
. - B: Get the
select
, then find alloption
descendants, then filter by those who has an attribute namedselected
.
Expected Behaviour:
A and B should give the same result.
Actual Behaviour:
After the user changed the selection in the dropdown,
- A returns the default selected
option
. - B returns the new selected
option
.
Question:
So why are they different? Is my understanding about CSS selectors wrong?
Live Demo:
Source Code:
HTML:
<select>
<option value='p'>p</option>
<option value='q' selected>q</option>
<option value='r'>r</option>
<option value='s'>s</option>
</select>
<input type='button' value='click me!'/> <br/>
ResultA : <span id='ResultA'>
here
</span> <br/>
ResultB : <span id='ResultB'>
here
</span> <br/>
Javascript:
function SetResult(ResultObj, ElementObj) {
ResultObj.text("length=" + ElementObj.length + " " + "val()=" + ElementObj.val());
}
$(function() {
$('input[type=button]').click(function() {
var SelectObj = $('select');
SetResult($("#ResultA"), SelectObj.find('option[selected]'));
SetResult($("#ResultB"), SelectObj.find('option').filter('[selected]'));
});
});
Test Result:
+---------------------------+--------------+---------------------+---------+-----+
| Browser | Environment | jQuery | A | B |
+---------------------------+--------------+---------------------+---------+-----+
| Chrome 22.0.1229.94m | Win7 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Chrome 23.0.1271.64 m | Win7 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 15.0.1 | Win7 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 16.0.2 | Win7 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| IE 6 | WinXP | 1.8.2, 1.7.2, 1.6.4 | *new* | new |
| IE 9 | Win7 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 12.02 | Win7 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 12.10 | Win7 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Safari 5.1.7 (7534.57.2) | Win7 | 1.8.2, 1.7.2, 1.6.4 | default | new |
+---------------------------+--------------+---------------------+---------+-----+
| Chrome 22.0.1229.94 | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Chrome 23.0.1271.64 | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 13.0 | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 14.0.1 | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 16.0.2 | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 12.01 | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 12.10 | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Safari 6.0.1 (7536.26.14) | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
+---------------------------+--------------+---------------------+---------+-----+
| Chrome 21.0.1180.82 | iOS 4.3.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 7.0.5 | iOS 4.3.5 | 1.8.2 | default | new |
| Safari | iOS 4.3.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
+---------------------------+--------------+---------------------+---------+-----+
- default means it returns the default selected
option
. - new means it returns the new selected
option
.
As you can see, all browsers except IE6 give different results.
option:selected
instead ofoption[selected]
for the#ResultA
will produce the same output as#ResultB
.