title: Cascading (Dependent) Country State City DropDownLists using jQuery AJAX in ASP.Net MVC
body: <p>I need to populate Cascading Country, State and City DropDownLists using jQuery AJAX in ASP.Net MVC.</p>
  <p>This is the tutorial</p>
  <p><a href="https://www.aspsnippets.com/Articles/Cascading-Dependent-Country-State-City-DropDownLists-using-jQuery-AJAX-in-ASPNet-MVC.aspx" rel="nofollow noreferrer">https://www.aspsnippets.com/Articles/Cascading-Dependent-Country-State-City-DropDownLists-using-jQuery-AJAX-in-ASPNet-MVC.aspx</a></p>
  <p>And working correctly.</p>
  <p>My problem is validate these DropDownList when send the form</p>
  <pre><code>@Html.DropDownListFor(m =&gt; m.CountryId, Model.Countries, &quot;[ === Select CountryId === ]&quot;, new { @Class = &quot;textarea&quot; })
  @Html.ValidationMessageFor(m =&gt; m.CountryId, &quot;&quot;, new { @class = &quot;text-danger&quot; })
  
  
  @Html.DropDownListFor(m =&gt; m.StateId, Model.States, &quot;[ === Select StateId === ]&quot;, new { @Class = &quot;textarea&quot; })
  @Html.ValidationMessageFor(m =&gt; m.StateId, &quot;&quot;, new { @class = &quot;text-danger&quot; })
  </code></pre>
  <p>In this moment if on the DropDownList no value is selected the form is validate.</p>
  <p>How to do resolve this?</p>
  <p>My View javascript part follow</p>
  <pre><code>@section Scripts {
  
      &lt;script src=&quot;https://code.jquery.com/jquery-1.10.2.js&quot;
              integrity=&quot;sha256-it5nQKHTz+34HijZJQkpNBIHsjpV8b6QzMJs9tmOBSo=&quot;
              crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
      &lt;script type=&quot;text/javascript&quot;&gt;
  
          $(function () {
              $(&quot;select&quot;).each(function () {
                  if ($(this).find(&quot;option&quot;).length &lt;= 1) {
                      $(this).attr(&quot;disabled&quot;, &quot;disabled&quot;);
                  }
              });
  
              $(&quot;select&quot;).change(function () {
                  var value = 0;
                  if ($(this).val() != &quot;&quot;) {
                      value = $(this).val();
                  }
                  var id = $(this).attr(&quot;id&quot;);
                  $.ajax({
                      type: &quot;POST&quot;,
                      url: &quot;/Home/AjaxMethod&quot;,
                      data: '{type: &quot;' + id + '&quot;, value: &quot;' + value + '&quot;}',
                      contentType: &quot;application/json; charset=utf-8&quot;,
                      dataType: &quot;json&quot;,
                      success: function (response) {
                          var dropDownId;
                          var list;
                          switch (id) {
                              case &quot;CountryId&quot;:
                                  list = response.States;
                                  DisableDropDown(&quot;#StateId&quot;);
                                  DisableDropDown(&quot;#CityId&quot;);
                                  PopulateDropDown(&quot;#StateId&quot;, list);
                                  break;
                              case &quot;StateId&quot;:
                                  dropDownId = &quot;#CityId&quot;;
                                  list = response.Cities;
                                  DisableDropDown(&quot;#CityId&quot;);
                                  PopulateDropDown(&quot;#CityId&quot;, list);
                                  break;
                          }
                      },
                      failure: function (response) {
                          alert(response.responseText);
                      },
                      error: function (response) {
                          alert(response.responseText);
                      }
                  });
              });
          });
  
          function DisableDropDown(dropDownId) {
              $(dropDownId).attr(&quot;disabled&quot;, &quot;disabled&quot;);
              $(dropDownId).empty().append('&lt;option&gt;[ === Select CountryId === ]&lt;/option&gt;');
          }
  
          function PopulateDropDown(dropDownId, list) {
              if (list != null &amp;&amp; list.length &gt; 0) {
                  $(dropDownId).removeAttr(&quot;disabled&quot;);
                  $.each(list, function () {
                      $(dropDownId).append($(&quot;&lt;option&gt;&lt;/option&gt;&quot;).val(this['Value']).html(this['Text']));
                  });
              }
          }
  
      &lt;/script&gt;
  }
  </code></pre>