:selected Selector
Categories: jQuery Extensions | Form
jQuery(':selected')
Description: Selects all elements that are selected.
-
jQuery(':selected')
version added: 1.0
The :selected
selector works for <option>
elements. It does not work for checkboxes or radio inputs; use :checked
for them.
Note:
Because:selected
is a jQuery extension and not part of the CSS specification, queries using :selected
cannot take advantage of the performance boost provided by the native DOM querySelectorAll()
method. To achieve the best performance when using :selected
to select elements, first select the elements using a pure CSS selector, then use .filter(":selected")
.
-
Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.
HTML:
<select name="garden" multiple="multiple"> <option>Flowers</option> <option selected="selected">Shrubs</option> <option>Trees</option> <option selected="selected">Bushes</option> <option>Grass</option> <option>Dirt</option> </select> <div></div>
CSS:
div { color:red; }
Code:
$("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }) .trigger('change');