title: MVC - show or hide (div) field dependent on drop down list
body: <p>we have a drop down list that if you choose "Unsatisfactory" then a Retention field should show up. We are using MVC 5 It is not working here is what we have:</p>
  
  <p>Drop down:</p>
  
  <pre><code>List&lt;SelectListItem&gt; satisfactionLevel = new List&lt;SelectListItem&gt;();
  satisfactionLevel.Add(new SelectListItem
  {
      Text = "Satisfactory",
      Value = "Satisfactory"
  });
  satisfactionLevel.Add(new SelectListItem
  {
      Text = "Unsatisfactory",
      Value = "Unsatisfactory",
  });
  </code></pre>
  
  <p>The fields:</p>
  
  <pre><code>   @using (Html.BeginForm())
      {
          @Html.AntiForgeryToken()
  
          &lt;div class="form-horizontal"&gt;
  
             &lt;div id="QPerformance" class="form-group row"&gt;
                  @Html.LabelFor(model =&gt; model.QPerformance, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div  class="col-md-10"&gt;
                      @Html.DropDownListFor(model =&gt; model.QPerformance, satisfactionLevel, "----Select----")
                      @Html.ValidationMessageFor(model =&gt; model.QPerformance, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div id="QRetention" class="form-group" style="visibility: hidden"&gt;
                  @Html.LabelFor(model =&gt; model.QRetention, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.EditorFor(model =&gt; model.QRetention, new { htmlAttributes = new { @class = "form-control" } })
                      @Html.ValidationMessageFor(model =&gt; model.QRetention, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
      }
  </code></pre>
  
  <p>The JavaScript section, this part we can't get the field to show or hide when we change the drop down:</p>
  
  <pre><code>  @section Scripts {
      &lt;script type="text/javascript"  src="~/Scripts/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          $(function hideOnLoad() {
              $('#QRetention').hide();
          });
  
  
          $(function () {
              $(document).ready(function () {
                  $('#QPerformance').change(function () {
                      if ($(this).val() != 'Unsatisfactory') {
                          $('#QRetention').hide();
                      } else {
                          $('#QRetention').show();
                      }
                  });
              });
          });
  
      &lt;/script&gt;
          }
  </code></pre>