Elements Returned by jQuery :selected on Dropdowns

When you use the jQuery :selected selector on a dropdown menu, it specifically targets and returns the <option> elements that are currently chosen within a <select> element. Rather than returning the parent dropdown container or raw text strings, jQuery yields a collection of one or more native HTMLOptionElement nodes wrapped inside a standard jQuery object.

The Specific Elements Returned

The :selected pseudo-class filter only matches <option> tags. When executed against a dropdown menu (e.g., $('select option:selected') or $('#dropdown :selected')), the return value is a jQuery object containing:

  • Standard Dropdown Menus (<select>): A jQuery collection containing the single <option> element currently chosen by the user. If no option is explicitly marked by the user, the browser defaults to selecting the first available <option>, which is what jQuery returns.
  • Multi-Select Dropdown Menus (<select multiple>): A jQuery collection containing every <option> element that is currently highlighted or active. If three options are chosen, the matched set contains three distinct HTMLOptionElement nodes.

What Is Not Returned

Developers frequently confuse the element returned by the selector with the data it holds:

  • Not the <select> element: The selector skips the parent <select> wrapper and isolates the descendant options.
  • Not the string value: The selector does not return a primitive string or value directly. Instead, it returns the DOM node. To retrieve the underlying value or the display text, you must invoke additional jQuery methods such as .val() or .text() on the returned selection.

Basic Implementation Example

// Targets the selected option within a dropdown
var selectedOption = $('#mySelect option:selected');

// selectedOption represents the <option> element
console.log(selectedOption); 

// Accessing properties of the returned <option> element
var value = selectedOption.val();   // The "value" attribute
var label = selectedOption.text();  // The visible text between <option></option>

In summary, applying :selected to a dropdown strictly filters and returns the active <option> DOM elements corresponding to the user's current selection.