:selectedS2C Home « Selectors « :selected

• <<    :reset Selector
• :submit Selector     >>

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

Parameters

None.

Return

N/A.

:selected ExampleTop

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');
});

Related Tutorials

jQuery 3.5 Basic Tutorials - Lesson 4 - jQuery Selectors

• <<    :reset Selector
• :submit Selector     >>