title: When select option selected show another select option
body: <p>I am trying to do something for my web page. Basicly what I want, is when a user selects an option from select menu or even better, when option from option group selected, based on what option he selected, another select menu will appear. Or even better if somebody know here, is it possible to have select menu behave like a multiple level drop down menu(When hover on one item, side menu appears so there wouldn't have to be showing another select menu)?
  Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#select1").change(function() {
    if ($(this).val() == 3) {
      $("#select2").show();
    } else {
      $("#select2").hide();
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select id="select1" name="optgroups"&gt;
    &lt;optgroup label="group1"&gt;
      &lt;option value="2"&gt;1&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="group2"&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="group3"&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;/optgroup&gt;
  &lt;/select&gt;
  &lt;select id="select2" style="display:none;"&gt;
    &lt;option value="4"&gt;4&lt;/option&gt;
    &lt;option value="5"&gt;5&lt;/option&gt;
    &lt;option value="6"&gt;6&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks a lot to whoever figures this out!</p>