:selected Selector

Selects all elements that are selected.

.selected()

The :selected selector works for <option> elements. It does not work for checkboxes or radio inputs; use :checked for them.

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.

JS
<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;
}
HTML
$("select")
  .change(function () {
    var str = "";
    $("select option:selected").each(function () {
      str += $(this).text() + " ";
    });
    $("div").text(str);
  })
  .trigger("change");
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)