title: JQuery - Callback Dropdownlist load
body: <p>I need to select a value from a Dropdownlist after it has been loaded:</p>
  
  <p><strong>EDIT:</strong> In the script associated with the View I have:</p>
  
  <pre><code>//Dropdown cascade call when trigger is called and fill councilDropdown:
  $("#districtDropdown").cascade({
      url: "/Address/ListCouncilByDistrict",
      paramName: "districtId",
      firstOption: 'Selecione o Concelho...',
      childSelect: $("#councilDropdown")
  });
  
  $("#PostalCode").keyup(function () {
  loadPTPostalCode();
  });
  
  $("#PostalCodeExtension").keyup(function () {
      loadPTPostalCode();
  });
  
  
  function loadPTPostalCode()
  {
    if ($("#PostalCode").val() &gt;= 1000) {
      $.ajax({
          url: '/Address/GetPTPostalCode',
          type: "POST",
          dataType: "json",
          data: { postalCode: $("#PostalCode").val(), postalCodeExtension: $("#PostalCodeExtension").val() },
          success: function (data) {
              if (data != null) {
                  $("#districtDropdown").val(data.PTDistrict_Id); // Set the Dropdown value
                  $('#districtDropdown').trigger('change'); // Trigger (force the dropdown to load
  
                  // *** This is done to soon, the dropdownlist of the Councils is not all loaded yet ***
                  $("#councilDropdown").val(data.PTCouncil_Id);
              }
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert(textStatus)
          }
      });
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>EDIT:</strong> The View</p>
  
  <pre><code>@model Heelp.ViewModels.AddressPTViewModel
  
  &lt;h2&gt;Create&lt;/h2&gt;
  
  @using (Ajax.BeginForm(MVC.Address.CreateAddressPT(), new AjaxOptions { OnSuccess = "showLoginConfirmationResultMessage" }, new { @id = "AddressForm" }))
  {
  @Html.AntiForgeryToken()
  
  &lt;div class="address1"&gt;
      @Html.LabelFor(model =&gt; model.Address1)
      @Html.TextBoxFor(model =&gt; model.Address1)
      @Html.ValidationMessageFor(model =&gt; model.Address1)
  &lt;/div&gt;
  &lt;div class="address2"&gt;
      @Html.TextBoxFor(model =&gt; model.Address2)
      @Html.ValidationMessageFor(model =&gt; model.Address2)
  &lt;/div&gt;
  &lt;div class="city"&gt;
      @Html.LabelFor(model =&gt; model.City)
      @Html.TextBoxFor(model =&gt; model.City)
      @Html.ValidationMessageFor(model =&gt; model.City)
  &lt;/div&gt;
  &lt;div class="postalCode"&gt;
      @Html.DisplayNameFor(m =&gt; m.PostalCode)
      @Html.TextBoxFor(m =&gt; m.PostalCode, new { @Value = "" })
      @Html.ValidationMessageFor(m =&gt; m.PostalCode)
  &lt;/div&gt;
  &lt;div class="postalCodeExtension"&gt;
      @Html.LabelFor(model =&gt; model.PostalCodeExtension)
      @Html.TextBoxFor(model =&gt; model.PostalCodeExtension)
      @Html.ValidationMessageFor(m =&gt; m.PostalCodeExtension)
  &lt;/div&gt;
  &lt;div class="postalCodeCity"&gt;
      @Html.LabelFor(model =&gt; model.PostalCodeCity)
      @Html.TextBoxFor(model =&gt; model.PostalCodeCity)
      @Html.ValidationMessageFor(m =&gt; m.PostalCodeCity)
  &lt;/div&gt;
  &lt;div id="district"&gt;
      @Html.DisplayNameFor(m =&gt; m.PTDistrict_Id)
      @Html.DropDownListFor(m =&gt; m.PTDistrict_Id, Model.PTDistrictList, HeelpResources.PTDistrictViewDropDownListFirstRecord, new { id = "districtDropdown" })
      @Html.ValidationMessageFor(m =&gt; m.PTDistrict_Id)
  &lt;/div&gt;
  &lt;div id="council"&gt;
      @Html.DisplayNameFor(m =&gt; m.PTCouncil_Id)
      @Html.DropDownListFor(m =&gt; m.PTCouncil_Id, Model.PTCouncilList, HeelpResources.PTCouncilViewDropDownListFirstRecord, new { id = "councilDropdown" })
      @Html.ValidationMessageFor(m =&gt; m.PTCouncil_Id)
  &lt;/div&gt;
  &lt;p&gt;
      &lt;input type="submit" value="Create" /&gt;
  &lt;/p&gt;
  }
  &lt;div&gt;
   @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>Cascade Function:</p>
  
  <pre><code>// Cascade function
  (function ($) {
  $.fn.cascade = function (options) {
      var defaults = {};
      var opts = $.extend(defaults, options);
  
      return this.each(function () {
          $(this).change(function () {
              var selectedValue = $(this).val();
              if (selectedValue == '') {
                  opts.childSelect.empty();
                  return;
              }
              var params = {};
              params[opts.paramName] = selectedValue;
              $.post(opts.url, params, function (items) {
                  //$.getJSON(opts.url, params, function (items) {
                  opts.childSelect.empty();
                  if (opts.firstOption != "")
                      opts.childSelect.append(
                          $('&lt;option/&gt;')
                              .attr('value', '')
                              .text(opts.firstOption));
                  $.each(items, function (index, item) {
                      // alert(opts.firstOption);
                      opts.childSelect.append(
                          $('&lt;option/&gt;')
                              .attr('value', item.Id)
                              .text(item.Name)
                      );
                  });
              });
          });
      });
  };
  })(jQuery);
  </code></pre>
  
  <p>But when I do that, as the Dropdownlist is not still loaded, the val() is not there yet.</p>
  
  <p>For example, if I put an alert message before, it works fine because it as time to load the dropdown.</p>
  
  <p>How can I set the value of the council dropdown only after the dropdown is loaded?</p>