title: How to hide and show div in asp.net mvc 5 using dropdownlist change event
body: <p>I am trying to hide and show div in my mvc 5 project using dropdownlist change event, i have researched, and luckily i found this code online, but it doesn't seem to work for me, i will appreciate if anyone could point at where i am making mistakes.
  Thanks in advance.</p>
  
  <pre><code>    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
          $(document).ready(function () {
              $("#CountryID").change(function () {
                  if ($(this).val() == "Ghana") {
                      $("#showStateLga").show();
                      $("#showStateLgaText").hide();
                  } else {
                      $("#showStateLga").hide();
                      $("#showStateLgaText").show();
                  } 
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Dropdownlist control:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.CountryID, htmlAttributes: new { @class = "control-label col-md-2" })
                  &lt;div class="col-md-10"&gt;
                      @Html.DropDownListFor(model =&gt; model.CountryID, (IEnumerable&lt;SelectListItem&gt;)ViewBag.cCountryList, "---Select---", new {@class = "form-control" })
                      @Html.ValidationMessageFor(model =&gt; model.CountryID, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Div Control:</p>
  
  <pre><code> &lt;div id="showStateLga" style="display: none"&gt;
                  &lt;div class="form-group"&gt;
                      @Html.LabelFor(model =&gt; model.notState, htmlAttributes: new { @class = "control-label col-md-2" })
                      &lt;div class="col-md-10"&gt;
                          @Html.EditorFor(model =&gt; model.notState, new { htmlAttributes = new { @class = "form-control" } })
                          @Html.ValidationMessageFor(model =&gt; model.notState, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      @Html.LabelFor(model =&gt; model.notCity, htmlAttributes: new { @class = "control-label col-md-2" })
                      &lt;div class="col-md-10"&gt;
                          @Html.EditorFor(model =&gt; model.notCity, new { htmlAttributes = new { @class = "form-control" } })
                          @Html.ValidationMessageFor(model =&gt; model.notCity, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Rendering Results:</p>
  
  <p>Dropdownlist:</p>
  
  <pre><code>    &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-md-2" for="CountryID"&gt;Country:&lt;/label&gt;
                      &lt;div class="col-md-10"&gt;
                          &lt;select class="form-control" data-val="true" data-val-number="The field Country: must be a number." data-val-required="Select country" id="CountryID" name="CountryID"&gt;&lt;option value=""&gt;---Select---&lt;/option&gt;
                     &lt;option value="1"&gt;Afghanistan&lt;/option&gt;
                     &lt;option value="2"&gt;Ghana&lt;/option&gt;
                     &lt;option value="3"&gt;Albania&lt;/option&gt;
                     &lt;option value="4"&gt;Algeria&lt;/option&gt;
                         &lt;/select&gt;
                          &lt;span class="field-validation-valid text-danger" data-valmsg-for="CountryID" data-valmsg-replace="true"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Div1:</p>
  
  <pre><code>    &lt;div id="showStateLga" style="display:block"&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-md-2" for="UserStateList"&gt;State:&lt;/label&gt;
                          &lt;div class="col-md-10"&gt;
                              &lt;select class="form-control" id="State" name="State"&gt;&lt;option value=""&gt;---Select State---&lt;/option&gt;
                            &lt;option value="1"&gt;Abia State&lt;/option&gt;
                           &lt;option value="2"&gt;Adamawa State&lt;/option&gt;
                            &lt;option value="3"&gt;Akwa Ibom State&lt;/option&gt;
  
                          &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-md-2"              for="UserCity"&gt;City:&lt;/label&gt;
                          &lt;div class="col-md-10"&gt;
                              &lt;select id="lga" name="lga" class="form-control"    required&gt;
                                  &lt;option value=""&gt;---Select LGA---&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Div2:</p>
  
  <pre><code>&lt;div id="showStateLgaText" style="display:none"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-md-2" for="notNigeriaState"&gt;State:&lt;/label&gt;
                          &lt;div class="col-md-10"&gt;
                              &lt;input class="form-control text-box single-line" data-val="true" data-val-required="Enter state" id="notNigeriaState" name="notNigeriaState" type="text" value="" /&gt;
                              &lt;span class="field-validation-valid text-danger" data-valmsg-for="notNigeriaState" data-valmsg-replace="true"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-md-2" for="notNigeriaCity"&gt;City:&lt;/label&gt;
                          &lt;div class="col-md-10"&gt;
                              &lt;input class="form-control text-box single-line" data-val="true" data-val-required="Enter city" id="notNigeriaCity" name="notNigeriaCity" type="text" value="" /&gt;
                              &lt;span class="field-validation-valid text-danger" data-valmsg-for="notNigeriaCity" data-valmsg-replace="true"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>