Question

The documentation for jQuery’s :selected selector says that the proper way to use it is to use, e.g., $('select').filter(':selected'). However, I can’t get it to work! It only works when I use something like $('select :selected').

Here’s a minimal example, along with my jsFiddle implementation of it:

the javascript:

function getLengths() {
    $("#dothis").text($("select").filter(":selected").length);
    $("#dothat").text($("select :selected").length);
}

$(function() {
    getLengths();
    $("select").change(getLengths);
});

the relevant html:

<select multiple="multiple">
  <option selected="true">one</option>
  <option>two</option>
</select>
<div>
  <pre>$("select").filter(":selected").length = <span id="dothis"></span></pre>
  <pre>$("select :selected").length = <span id="dothat"></span></pre>
</div>

Answer 1

Filter option elements, not select:

function getLengths() {
    $("#dothis").text($("option").filter(":selected").length);
    $("#dothat").text($("select :selected").length);
}

$(function() {
    getLengths();
    $("select").change(getLengths);
});

http://jsfiddle.net/fdU83/6/