title: MVC - select correct dropdown option after jquery populating it
body: <p>I'm creating an editing view that will change its content and form elements based on the editing operations. I pass a model, store a value in a hidden element and then, once the document is ready, i use ajax to populate a dropdown. Immediately after that i need to select the right option that is equal to the value in the hidden element.
  My code won't work and i've been trying to figure out why for 2 days.</p>
  
  <p><strong>RAZOR</strong></p>
  
  <pre><code>@Html.DropDownList("ddl_publisher", new List&lt;SelectListItem&gt;(), new { @class = "form-control form-group", @style = "display:none", @onchange = "storeNewPublisher()" });
  @Html.Hidden("hid_publisher", Model.Value, new { @class = "form-control" })
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(document).ready(function(){
      loadPublishers();
      changeDDLSelection();
  }
  
  function changeDDLSelection() {
      publ = $("#hid_publisher").val();
      $("#ddl_publisher").val(publ).change();
  }
  function storeNewPublisher() {
      var publisherText = $("#ddl_publisher option:selected").text();
      var publisherValue = $("#ddl_publisher option:selected").val();
      var publisherStatus = publisherText.replace(publisherValue, '').replace('-', '').replace('[', '').replace(']', '').trim();
      $("#hid_publisher").val(publisherValue);
      $("#hid_publisherStatus").val(publisherStatus);
  }
  </code></pre>
  
  <p><strong>AJAX</strong></p>
  
  <pre><code>function loadPublishers() {
      $.ajax({
          type: "GET",
          url: "/Filter/GetPublishers/",
          contentType: 'application/json',
          data: { productType : $("#ddl_filterProdType option:selected").val() },
          success: function (data) {
              $.each(data, function (i, pub) {
                  $("#ddl_publisher").append('&lt;option value="' + pub.Text + '"&gt; [ ' + pub.Value + ' ] - ' + pub.Text + '&lt;/option&gt;');
              });
           },
           error: displayPublishFailureMessage
       });
   }
  </code></pre>
  
  <p>The call succeedes, and inside <em>changeDDLSelection</em> the variable <em>publ</em> has the right value, but the dropdown won't change its option (it does it, instead, if i execute the code in Chrome console).
  Yet, <em>change</em> fires, so <em>storeNewPublisher</em> is triggered but every local variable is <em>undefined</em>.</p>
  
  <p>I can't bang my head on the wall more than this, my neighbours are complaining.</p>
  
  <p>Many thanks in advance</p>