`:selected` JQ Home << Selectors << :selected

Form selected selector.

Shorthand version $(':selected')

Description

The :selected selector, selects all elements of type selected.

The :selected selector only works for <option> elements.
- For checkboxes and radio inputs use the :checked Selector instead.
Being a jQuery extension the :selected pseudo selector is not part of any current CSS specification. Therefore :selected cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the examples below to narrow the search and improve performance.
Best results can be achieved by using the :input selector in conjunction with .filter() via $("cssSelector").filter(":selected")

Syntax

Signature	Description
`jQuery(':selected')`	Form selected pseudo-class match

Parameters

None.

Return

N/A.

`:selected` Example Top

Selects all elements of type selected.

In the example below we output a message that changes every time a new select value is chosen.



$(function(){
  $('.ourform').submit(function () { return false; }); // disable submit 
  
  $("select").change(function () {
    var selectValue = "";
    
    $("select option:selected").each(function () {
   	  selectValue += $(this).text() + " pie shape is selected";
    });
    
    $("#selection").text(selectValue);
  }).trigger('change');
});