title: Hide/Show drop menu based on other drop menu selection
body: <p>Recently I have been tasked with learning MVC for work. I have run into a scenario where I need to show a drop menu based on another drop menu selection. My cshtml is here:</p>
  
  <pre class="lang-html prettyprint-override"><code>@using(Html.BeginForm("Make","Order")) {
      &lt;fieldset&gt;
          &lt;h4&gt;Selection1&lt;/h4&gt;
          &lt;select id="MAIN" name="main"&gt;
              &lt;option value="X"&gt;X&lt;/option&gt;
              &lt;option value="Y"&gt;Y&lt;/option&gt;
              &lt;option value="Z"&gt;Z&lt;/option&gt;
          &lt;/select&gt;
          &lt;select id="showForY" name="yOPT" hidden&gt;
              &lt;option value="Y-2"&gt;Y-2&lt;/option&gt;
              &lt;option value="Y-3"&gt;Y-3&lt;/option&gt;
          &lt;/select&gt;
          &lt;select id="showForZ" name="zOPT" hidden&gt;
              &lt;option value="Z-2"&gt;Z-2&lt;/option&gt;
              &lt;option value="Z-3"&gt;Z-3&lt;/option&gt;
          &lt;/select&gt;
          &lt;button id="submit" type="submit" value="Submit"&gt;Submit&lt;/button&gt;
          &lt;button id="reset" type="reset" value="Reset"&gt;Reset Form&lt;/button&gt;
      &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>I want to be able to have the <code>showForY</code> to show only when value Y is selected in the main select field. How would I do this? I know it is possible to do it with either JavaScript or jQuery, but have never work with them.</p>