title: Onchange on MVC
body: <p>I have this DDL:</p>
  
  <pre><code>&lt;div class="editor-field"&gt;           
        @Html.DropDownList("Type", ViewBag.Type as SelectList, "-- Select --")
        @Html.ValidationMessageFor(model =&gt; model.Type)
  &lt;/div&gt;
  </code></pre>
  
  <p>Based on the selected item in this DDL, I want hide an another DDL, in
  other words, this 2nd DDL will be displayed only if a specific option
  of the first DDL is checked.</p>
  
  <p>The 2nd DDL:</p>
  
  <pre><code>&lt;div id="divSimilar" class="editor-field" style="display:none"&gt;
       @Html.LabelFor(model =&gt; model.SimilarId)            
       @Html.DropDownList("Similar", ViewBag.SimilarId as SelectList, "-- Select --")
       @Html.ValidationMessageFor(model =&gt; model.SimilarId)
  &lt;/div&gt;    
  </code></pre>
  
  <p>View: </p>
  
  <pre><code>@section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
  }
  
  &lt;script type="text/javascript"&gt;
  var similar = $('#divSimilar');
  $('#Type').change(function () {
      var selection = $(this).val();
      if (selection == "Eletronic") {
          similar.show();
      } else {
          similar.hide();
      }
  });
  &lt;/script&gt;    
  </code></pre>
  
  <p>When I change the index(value) of my DDL, nothing happens, what can I do?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Just to show it in browser...</p>
  
  <pre><code>&lt;div class="editor-label"&gt;
       &lt;label for="Type"&gt;Type&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;                
      &lt;select data-val="true" data-val-regex="The field Type is not in the correct format." data-val-regex-pattern="^([a-zA-Z\u00c0-\u01ff]([\s]?))+$" data-val-required="The Type field is required." id="Type" name="Type"&gt;
         &lt;option value=""&gt;-- Select --&lt;/option&gt;
         &lt;option value="Eletronic"&gt;Eletronic&lt;/option&gt;
         &lt;option value="Portable"&gt;Portable&lt;/option&gt;
      &lt;/select&gt;                
      &lt;span class="field-validation-valid" data-valmsg-for="Type" data-valmsg-replace="true"&gt;
      &lt;/span&gt;
   &lt;/div&gt;
  
  &lt;div id="divSimilar" class="editor-field" style="display:none"&gt;
       &lt;label for="SimilarId"&gt;Similar&lt;/label&gt;
       &lt;select data-val="true" data-val-number="The field Similar must be a number." id="SimilarId" name="SimilarId"&gt;
         &lt;option value=""&gt;-- Select --&lt;/option&gt;
         &lt;option value="1"&gt;Headphone&lt;/option&gt;
       &lt;/select&gt;
       &lt;span class="field-validation-valid" data-valmsg-for="SimilarId" data-valmsg-replace="true"&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var similar = $('#divSimilar');
      $('#Type').change(function () {
          var selection = $(this).val();
          if (selection == "Eletronic") {
              similar.show();
          } else {
              similar.hide();
          }
      });
  &lt;/script&gt;
  </code></pre>