entries/selected-selector.xml

<?xml version="1.0"?>
<entry type="selector" name="selected" return="">
  <title>:selected Selector</title>
  <sample>:selected</sample>
  <signature>
    <added>1.0</added>
  </signature>
  <desc>Selects all elements that are selected.</desc>
  <longdesc>
    <p>The <code>:selected</code> selector works for <code>&lt;option&gt;</code> elements. It does not work for checkboxes or radio inputs; use <code>:checked</code> for them.</p>
  </longdesc>
  <note id="jquery-selector-extension" type="additional" data-selector=":selected"/>
  <example>
    <desc>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.</desc>
    <code><![CDATA[
$( "select" )
  .on( "change", function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    } );
    $( "div" ).text( str );
  } )
  .trigger( "change" );
]]></code>
    <css><![CDATA[
  div {
    color: red;
  }
]]></css>
    <html><![CDATA[
<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>
]]></html>
  </example>
  <category slug="selectors/form-selectors"/>
  <category slug="selectors/jquery-selector-extensions"/>
  <category slug="version/1.0"/>
</entry>