title: Setting dropdown value after AJAX call not working
body: <p>I have an ASP.NET MVC application, and one of the pages has dropdowns to select Country and State.  This page collects customer data, including the address.</p>
  
  <p>I followed <a href="http://www.advancesharp.com/blog/1145/mvc-dropdownlistfor-fill-on-selection-change-of-another-dropdown" rel="nofollow" title="this">this</a> tutorial to set it all up so that the State values are populated when the Country is selected.</p>
  
  <p>So, I have it working fine when a new customer is added that the Country drop down is populated, and when you change the value for Country, the State dropdown is refilled, and on submitting the form, I get the StateID and CountryID in the model.</p>
  
  <p>What I'm having problems with is on editing a customer, when the model already has a StateID and CountryID, I can get the Country dropdown to select the correct value, but not the State dropdown.</p>
  
  <p>The <code>FillStates()</code>method below is used to populate the State dropdown when the Country value is changed.</p>
  
  <pre><code>function FillStates() {
  
     var countryID = $("#CountryID").val();
  
     $.ajax({
         url: '/Customers/GetStates',
         type: "GET",
         dataType: "JSON",
         data: { CountryID: countryID },
         success: function (states) {
             $("#StateID").html("");
             if (Object.keys(states).length &gt; 0) {
                 $("#StateID").append($('&lt;option&gt;&lt;/option&gt;').val(0).html('Select a State'));
             }
             else {
                 $("#StateID").append($('&lt;option&gt;&lt;/option&gt;').val(0).html(''));
             }
  
             $.each(states, function (i, state) {
                 $("#StateID").append(
                     $('&lt;option&gt;&lt;/option&gt;').val(state.StateID).html(state.Name));
                 });
             }
      });
  }
  </code></pre>
  
  <p>For editing a customer though, I need to fill the States dropdown on page load AND select the correct value from the dropdown.</p>
  
  <p>Here's the javascript that should do exactly that...</p>
  
  <pre><code>$(document).ready(function () {
      $.when(FillStates()).done(function (e) {
          $("#StateID").val('@Model.StateID');                
      });            
  });
  </code></pre>
  
  <p>But this isn't working - I've debugged it and (let's assume the model has StateID = 8) when it hits the line <code>$("#StateID").val('8');</code> that line executes without error but doesn't change the selected value of the dropdown.</p>
  
  <p>If I were to move that line into the bottom of the <code>FillStates()</code> method, it DOES change the selection properly - but that would then execute every time the Country is changed, instead of only executing once when the page loads.</p>
  
  <p>Why is the exact same line of code <code>$("#StateID").val('8');</code> working fine when it's inside the <code>FillStates()</code> method, but not working when I execute it after <code>FillStates()</code> completes?</p>