jQuery :selected Selector

What Is :selected?

:selected (since jQuery 1.0) matches <option> elements that are currently selected in a <select>. Official docs: it does not work for checkboxes or radios — use :checked for those.

$("option:selected")              // selected options
$("select option:selected")       // official-style scope
$("#city option:selected").text() // visible label
$("#city").val()                  // value attribute (simpler)

// Not for checkboxes / radios → use :checked
// Faster pattern:
$("#city option").filter(":selected")

How to Use :selected

Scope to a select, read text or value on change, and re-query after the user picks a new option.

1. Prefer $("select option:selected") or an id-scoped query.
2. Bind change on the <select> so results stay current.
3. Use .text() for the label, .val() on the select for the value.
4. For multi-select, loop option:selected (official demo pattern).
5. For speed: $("#id option").filter(":selected") (official tip).

Pseudocode

matches = []
for each option in search context:
    if option is currently selected:
        matches.add(option)

return matches

// Official change pattern:
on select.change:
    texts = map(matches, option → option.text)
    show(texts)

Cheat Sheet

Keep these facts handy while reading dropdown selections.

Live Preview

Change the dropdown (or multi-select), then read option:selected text — same idea as the official demo.

$("select option:selected")
single: Shrubs
multi: Flowers Trees
count: 3

/* official change-demo idea */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console with jQuery loaded, or use Try It Yourself for a live editor.

$("select")
  .on("change", function () {
    var str = "";
    $("select option:selected").each(function () {
      str += $(this).text() + " ";
    });
    $("#out").text(str);
  })
  .trigger("change");

Initial (Shrubs selected): "Shrubs "
After picking Trees: "Trees "

console.log("option:selected →", $("option:selected").length);
console.log("input:selected →", $("input:selected").length);
console.log("input:checked →", $("input:checked").length);

option:selected → 1
input:selected → 0
input:checked → 1  (the ticked checkbox)

function show() {
  $("#out").text(
    "text: " + $("#city option:selected").text() + "\\n" +
    "value: " + $("#city").val()
  );
}
show();
$("#city").on("change", show);

text: Paris
value: par
(Updates when you change the city)

function listSelected() {
  var labels = $("#skills option:selected").map(function () {
    return $(this).text();
  }).get();
  $("#out").text(labels.join(", ") || "(none)");
}
listSelected();
$("#skills").on("change", listSelected);

HTML, CSS
(Changes as you Ctrl/Cmd+click options)

var $picked = $("#menu option").filter(":selected");
$("#out").text(
  "filtered: " + $picked.text() + "\\n" +
  "count: " + $picked.length
);

filtered: Pasta
count: 1

Performance Notes

Official docs: because :selected is not CSS, it cannot use querySelectorAll. Select options with a pure CSS selector first, then .filter(":selected").

Key Takeaways