title: Make some options in a select menu "unselectable"
body: <p>I have a <code>select</code> element with a few options, but I want some of the options to not be selectable.</p>
  
  <p>Basically it's like this:</p>
  
  <pre><code>&lt;select&gt;
      &lt;option&gt; CITY 1 &lt;/option&gt;
      &lt;option&gt; City 1 branch A &lt;/option&gt;
      &lt;option&gt; City 1 branch B &lt;/option&gt;
      &lt;option&gt; City 1 branch C &lt;/option&gt;
      &lt;option&gt; CITY 2 &lt;/option&gt;
      &lt;option&gt; City 2 branch A &lt;/option&gt;
      &lt;option&gt; City 2 branch B &lt;/option&gt;
      ...
  &lt;/select&gt;
  </code></pre>
  
  <p>So as you can see, I don't want the cities do be directly selectable, but only the options that come under each city. </p>
  
  <p>How can it be done that the user can click on <code>CITY 1</code> or <code>CITY 2</code> but it won't be selected, so the user is forced to choose one of the branches underneath?</p>