jQuery :selected Selector

What You’ll Learn

The :selected selector matches every selected <option> inside a <select> dropdown. Available since jQuery 1.0; does not apply to checkboxes or radios — use :checked for those.

Introduction

Dropdown menus, country pickers, and category filters all use <select> elements with nested <option> tags. When a user picks an item, that option becomes the selected one. jQuery’s :selected pseudo-class finds every option currently highlighted in the list.

Official jQuery documentation notes that :selected works for option elements only — not checkboxes or radio inputs. For those, use :checked instead. The official demo binds change on a select, loops option:selected, and writes the combined text to a div.

Understanding the :selected Selector

Think of :selected as “which options are picked in my dropdown?”:

• select option:selected → the active option(s) in that list.
• Single <select> → usually one option:selected.
• <select multiple> → can match several options at once.
• input:checkbox:checked → different control — use :checked, not :selected.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":selected" )

// recommended — scope to options:
$( "select option:selected" )
$( "#mySelect option:selected" )

// read value (common shortcut):
$( "#mySelect" ).val()

// performance pattern (official docs):
$( "#mySelect option" ).filter( ":selected" )

// not for checkboxes — use :checked instead:
$( "input:checked" )

Parameters

• No arguments — keeps option elements that are currently selected.

Return value

• A jQuery object containing every selected option (one or more for multi-select).

Official jQuery API example

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

Examples Gallery

Example 1 follows the official jQuery select option:selected change demo. Examples 2–5 cover reading values, contrast with :checked, multi-select, and the .filter performance pattern.

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

Initial: "Flowers " (first option, red text in div)
Change to Trees → div shows "Trees "

$( "#category" ).on( "change", function() {
  var val = $( this ).val();
  var label = $( "#category option:selected" ).text();
  $( "#out" ).text( "Value: " + val + " | Label: " + label );
} );

Pick "trees" → Value: trees | Label: Trees
.value for server data; .text() for display copy

console.log( "Selected options:", $( "option:selected" ).length );
console.log( "Checked inputs:", $( "input:checked" ).length );

// :selected → select options only
// :checked → checkboxes, radios, and options

Selected options: 1 (dropdown)
Checked inputs: 1 (ticked checkbox)
Use the right pseudo-class per control type

$( "#tags" ).on( "change", function() {
  var picked = [];
  $( "#tags option:selected" ).each( function() {
    picked.push( $( this ).val() );
  } );
  $( "#out" ).text( picked.join( ", " ) );
} );

Pick js, css → out shows "js, css"
:selected can match more than one option

var selected = $( "#mySelect option" ).filter( ":selected" );

// equivalent to:
// $( "#mySelect option:selected" )

selected.each( function() {
  console.log( $( this ).text() );
} );

Logs text of each selected option
Official jQuery performance recommendation

🚀 Common Use Cases

• Category filters — react to option:selected on change.
• Shipping forms — read country/state from selected option value.
• Dynamic UI — show panels based on dropdown selection text.
• Multi-tag pickers — collect all option:selected values into an array.
• Validation — require a non-empty option:selected before submit.
• Analytics — log label text from option:selected on user change.

📝 Notes

• Available since jQuery 1.0 — for option elements in select controls.
• Does not match checkboxes or radio inputs — use :checked (official docs).
• jQuery extension — prefer option prefix or .filter(":selected").
• Single select usually returns one option; multiple can return several.
• $("#select").val() is a convenient shortcut for the selected value.
• Bind change on the select, not individual options, for user picks.

💡 Best Practices