Difference between find('option[selected]') and find('option').filter('[selected]')

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 all option descendants that has an attribute named selected.
• B: Get the select, then find all option descendants, then filter by those who has an attribute named selected.

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:

Live demo is here here.

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() {