title: group select options in javascript or jQuery
body: <p>i was wondering if it would be possible to group options in select dropdown</p>
  
  <p>so if i select first option, first sub option 1 and first sub option 2 would be populated in the second select dropdown</p>
  
  <p>an example here: <a href="http://jsfiddle.net/atoswchataigner/7ThYY/" rel="nofollow">http://jsfiddle.net/atoswchataigner/7ThYY/</a></p>
  
  <pre><code>&lt;!-- RUBRIQUE --&gt;
      &lt;select class="ms-RadioText" title="Rubrique" id="ctl00_DropDownChoice" name="ctl00$DropDownChoice"&gt;
              &lt;option value="" selected="selected"&gt;&lt;/option&gt;
              &lt;option value="first option"&gt;first option&lt;/option&gt;
              &lt;option value="second option"&gt;second option&lt;/option&gt;        
      &lt;/select&gt; 
  
      &lt;!-- SOUS/RUBRIQUE --&gt;
      &lt;select class="ms-RadioText" title="Sous-Rubrique" id="ctl00_DropDownChoiceSub" name="ctl00$DropDownChoiceSub" disabled=""&gt;
              &lt;option value="" selected="selected"&gt;&lt;/option&gt;
              &lt;option value="first sub option 1"&gt;first sub option 1&lt;/option&gt;
              &lt;option value="first sub option 2"&gt;first sub option 2&lt;/option&gt;
              &lt;option value="second sub option 1"&gt;second sub option 1&lt;/option&gt;
              &lt;option value="second sub option 2"&gt;second sub option 2&lt;/option&gt;
      &lt;/select&gt; ​
  
  //first option
  //first sub option 1
  //first sub option 2
  
  //second option
  //second sub option 1
  //second sub option 2
  
  //replace spaces with _ in values
  jQuery(".ms-RadioText &gt; option").each(function () {
              jQuery(this).attr("value", jQuery(this).attr("value").replace(/ /g, "_"));
          });​
  </code></pre>