Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel