title: Difference between find('option[selected]') and find('option').filter('[selected]')
body: <h2>Scenario:</h2>
  
  <p>I got 2 jQuery expressions:</p>
  
  <pre><code>/* A */ $('select').find('option[selected]');
  /* B */ $('select').find('option').filter('[selected]');
  </code></pre>
  
  <p>which mean (let's assume there's only one <code>select</code> in the document, for simplicity):</p>
  
  <ul>
  <li><strong>A</strong>: Get the <code>select</code>, then find all <code>option</code> descendants that has an attribute named <code>selected</code>.</li>
  <li><strong>B</strong>: Get the <code>select</code>, then find all <code>option</code> descendants, then filter by those who has an attribute named <code>selected</code>.</li>
  </ul>
  
  <h2>Expected Behaviour:</h2>
  
  <p><strong>A</strong> and <strong>B</strong> should give the same result.</p>
  
  <h2>Actual Behaviour:</h2>
  
  <p>After the user changed the selection in the dropdown,</p>
  
  <ul>
  <li><strong>A</strong> returns the <em>default</em> selected <code>option</code>.</li>
  <li><strong>B</strong> returns the <em>new</em> selected <code>option</code>.</li>
  </ul>
  
  <h2>Question:</h2>
  
  <p>So why are they different? Is my understanding about CSS selectors wrong?</p>
  
  <h2>Live Demo:</h2>
  
  <p>Live demo is <strike><a href="http://jsfiddle.net/ugXtx/4/" rel="nofollow">here</a></strike> <a href="http://jsfiddle.net/ugXtx/9/" rel="nofollow">here</a>.</p>
  
  <h2>Source Code:</h2>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;select&gt;
   &lt;option value='p'&gt;p&lt;/option&gt; 
   &lt;option value='q' selected&gt;q&lt;/option&gt;
   &lt;option value='r'&gt;r&lt;/option&gt; 
   &lt;option value='s'&gt;s&lt;/option&gt; 
  &lt;/select&gt;
  
  
  &lt;input type='button' value='click me!'/&gt; &lt;br/&gt; 
   ResultA : &lt;span id='ResultA'&gt;
      here
  &lt;/span&gt; &lt;br/&gt; 
   ResultB : &lt;span id='ResultB'&gt;
      here
  &lt;/span&gt; &lt;br/&gt; 
  </code></pre>
  
  <p><strong>Javascript</strong>:</p>
  
  <pre><code>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]'));
      });
  });
  </code></pre>
  
  <h2>Test Result:</h2>
  
  <pre><code>+---------------------------+--------------+---------------------+---------+-----+
  |          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 |
  +---------------------------+--------------+---------------------+---------+-----+
  </code></pre>
  
  <ul>
  <li><em>default</em> means it returns the <em>default</em> selected <code>option</code>.</li>
  <li><em>new</em> means it returns the <em>new</em> selected <code>option</code>.</li>
  </ul>
  
  <p>As you can see, all browsers except IE6 give different results.</p>