title: Select all options in optgroup
body: <p>I have a <code>select</code> element with grouped <code>option</code>s. I need to select (or deselect) all <code>option</code>s in an <code>optgroup</code> when an <code>option</code> is clicked.  I also need to be able to have multiple <code>optgroup</code>s being selected at once.</p>
  
  <p>The way I wish it to work is this:</p>
  
  <ul>
  <li>If nothing is selected, I want to click one option and get all of the options in the same optgroup selected.</li>
  <li>If one or more optgroups are already selected, I want to click one option in another optgroup and have all those options selected instead.</li>
  <li>If one or more optgroups are already selected, I want to be able to Ctrl-click an option  in a non-selected optgroup and have all of the options in that optgroup selected too.</li>
  <li>If one or more optgroups are already selected, I want to be able to Ctrl-click an option in a selected optgroup and have all the options in that group deselected.</li>
  </ul>
  
  <p>Looking at other answers on Stack Overflow I created the following:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select multiple="multiple" size="10"&gt;
      &lt;optgroup label="Queen"&gt;
          &lt;option value="Mercury"&gt;Freddie&lt;/option&gt;
          &lt;option value="May"&gt;Brian&lt;/option&gt;
          &lt;option value="Taylor"&gt;Roger&lt;/option&gt;
          &lt;option value="Deacon"&gt;John&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="Pink Floyd"&gt;
          &lt;option value="Waters"&gt;Roger&lt;/option&gt;
          &lt;option value="Gilmour"&gt;David&lt;/option&gt;    
          &lt;option value="Mason"&gt;Nick&lt;/option&gt;                
          &lt;option value="Wright"&gt;Richard&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('select').click(selectSiblings);
  function selectSiblings(ev) {
      var clickedOption = $(ev.target);
      var siblings = clickedOption.siblings();
      if (clickedOption.is(":selected")) {
          siblings.attr("selected", "selected");
      } else {
          siblings.removeAttr("selected");
      }
  }​
  </code></pre>
  
  <p>I made an example here: <a href="http://jsfiddle.net/mflodin/Ndkct/" rel="nofollow">http://jsfiddle.net/mflodin/Ndkct/</a>
  (Sadly jsFiddle doesn't seem to support IE8 any more.)</p>
  
  <p>This works as expected in Firefox (16.0), but in IE8 it doesn't work at all. From other answers I have found out that IE8 can't handle the <code>click</code> event on <code>optgroup</code> or <code>option</code>, which is the reason I bind it to the <code>select</code> and then use <code>$(ev.target)</code>. But in IE8 the <code>$(ev.target)</code> still points to the entire <code>select</code> and not to the <code>option</code> that was clicked. How can I find out which <code>option</code> (or containing <code>optgroup</code>) that was clicked and whether it was selected or deselected?</p>
  
  <p>Another unexpected behaviour, but minor in comparison, is that in Chrome (20.0) the deselect doesn't happen until the mouse leaves the <code>select</code>. Does anybody know a workaround for this?
  ​</p>