title: Show/HIde class on option selection CSHTML
body: <p>I am new to any front end development and am currently writing an HTML view for my job using cshtml. I want to show and hide classes within this file using JQuery, and believe I have written a function to do so. When the initial selection is made, I want to show the class which corresponds to the option value. When a change is made, no class is shown. Here is my code:</p>
  
  <pre><code>@{
      ViewBag.Title = "Editor";
  }
  
  &lt;script&gt;
  
      var table = function () {
  
          var t = document.getElementById('table');
          var selection = t.options[t.selectedIndex].value;
  
          if (selection == "emp") {
              $("#emp").show();
              $("#itm").hide();
              $("#ln").hide();
              $("#mo").hide();
              $("#shft").hide();
              $("#twi").hide();
          } else if (selection == "itm") {
              $("#emp").hide();
              $("#itm").show();
              $("#ln").hide();
              $("#mo").hide();
              $("#shft").hide();
              $("#twi").hide();
          } else if (selection == "ln") {
              $("#emp").hide();
              $("#itm").hide();
              $("#ln").show();
              $("#mo").hide();
              $("#shft").hide();
              $("#twi").hide();
          } else if (selection == "mo") {
              $("#emp").hide();
              $("#itm").hide();
              $("#ln").hide();
              $("#mo").show();
              $("#shft").hide();
              $("#twi").hide();
          } else if (selection == "shft") {
              $("#emp").hide();
              $("#itm").hide();
              $("#ln").hide();
              $("#mo").hide();
              $("#shft").show();
              $("#twi").hide();
          } else if (selection == "twi") {
              $("#emp").hide();
              $("#itm").hide();
              $("#ln").hide();
              $("#mo").hide();
              $("#shft").hide();
              $("#twi").show();
          } else {
              $("#emp").hide();
              $("#itm").hide();
              $("#ln").hide();
              $("#mo").hide();
              $("#shft").hide();
              $("#twi").hide();
          }
      }
  &lt;/script&gt;
  
  &lt;h2&gt;Edits&lt;/h2&gt;
  
  &lt;select id="table" name="table" onclick="table()"&gt;
      &lt;option value="0"&gt;Select a table to edit&lt;/option&gt;
      &lt;option value="0"&gt;&lt;/option&gt;
      &lt;option value="emp"&gt;Employee&lt;/option&gt;
      &lt;option value="itm"&gt;Item&lt;/option&gt;
      &lt;option value="ln"&gt;Line&lt;/option&gt;
      &lt;option value="mo"&gt;MO&lt;/option&gt;
      &lt;option value="shft"&gt;Shift&lt;/option&gt;
      &lt;option value="twi"&gt;TWI&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  
  &lt;span hidden class="emp"&gt;
      &lt;select name="empid" id="empid"&gt;
          &lt;option value="0"&gt;Select Employee&lt;/option&gt;
          @foreach (var emp in ViewBag.EMP)
          {
              &lt;option value="@emp.EmployeeID"&gt;@emp.EmployeeName&lt;/option&gt;
          }
      &lt;/select&gt;
  &lt;/span&gt;
  
  &lt;span hidden class="itm"&gt;
      &lt;select name="itmid" id="itmid"&gt;
          &lt;option value="0"&gt;Select Item&lt;/option&gt;
          @foreach (var itm in ViewBag.ITM)
          {
              &lt;option value="@itm.ItemID"&gt;@itm.ItemName&lt;/option&gt;
          }
      &lt;/select&gt;
  &lt;/span&gt;
  
  &lt;span hidden class="ln"&gt;
      &lt;select name="lnid" id="lnid"&gt;
          &lt;option value="0"&gt;Select Line&lt;/option&gt;
          @foreach (var ln in ViewBag.LN)
          {
              &lt;option value="@ln.LineID"&gt;@ln.LineName&lt;/option&gt;
          }
      &lt;/select&gt;
  &lt;/span&gt;
  
  &lt;span hidden class="mo"&gt;
      @{int count = 0;}
      &lt;select name="bch" id="bch"&gt;
          &lt;option value="0"&gt;Select MO&lt;/option&gt;
          @foreach (var mo in ViewBag.MO)
          {
              &lt;option value="@mo.NBMO"&gt;@ViewBag.fullMO[count]&lt;/option&gt;
              count += 1;
          }
      &lt;/select&gt;
  &lt;/span&gt;
  
  &lt;span hidden class="shft"&gt;
      &lt;select name="shftid" id="shftid"&gt;
          &lt;option value="0"&gt;Select Shift&lt;/option&gt;
          @foreach (var shft in ViewBag.SHFT)
          {
              &lt;option value="@shft.ShiftID"&gt;@shft.ShiftCode&lt;/option&gt;
          }
      &lt;/select&gt;
  &lt;/span&gt;
  
  &lt;span hidden class="twi"&gt;
      @{count = 0;}
      &lt;select name="tnum" id="tnum"&gt;
          &lt;option value="0"&gt;Select TWI&lt;/option&gt;
          @foreach (var twi in ViewBag.TWI)
          {
              &lt;option value="@twi.TWINumber"&gt;@ViewBag.fullTWI[count]&lt;/option&gt;
              count += 1;
          }
      &lt;/select&gt;
  &lt;/span&gt;
  </code></pre>