title: Loading Select options via ajax and then setting a value
body: <p>I have a select field, <code>#parentCatSelect</code> whose values get generated via AJAX / PHP after the page loads via the function <code>acLoadParentCategories</code>.</p>
  
  <p>The function needs to be used two separate ways, first to create a new part (which works fine) and secondly to update a part. When a user updates a part, all the form values (including this one) should be loaded from values in the Database via AJAX. All values load properly, except this one.</p>
  
  <p>I cannot for the life of me figure out why my value is not getting setting after the select values load.</p>
  
  <p>My function to load the categories via ajax:</p>
  
  <pre><code>var acLoadParentCategories = function( callback ) {
  
      var _data = {
          action: 'ac_ajax_load_parent_cats'
      };
  
      jQuery.post(
          the_ajax_script.ajaxurl,
          _data,
          function( response ) {
  
              var results = JSON.parse(response.results);
              var html = '';
  
              for (var i = 0; i &lt; results.length; i++ ) {
                  html += '&lt;option value="' + results[i].cat_id + '"&gt;' + results[i].cat_name + '&lt;/option&gt;';
              }
  
              jQuery('#parentCatSelect').append(html);
          }
      );
  
      callback();
      return;
  };
  </code></pre>
  
  <p>and where I am to load it, and then properly set the val</p>
  
  <pre><code>acLoadParentCategories( function() {
      console.log('happening');
      jQuery('#parentCatSelect option[value="1"]').attr('selected', true);
  });
  </code></pre>
  
  <p>The <code>console.log</code> statement gets called correctly, but no matter what I try, I cannot get the value to set properly after the select box gets generated. What am I doing wrong?</p>
  
  <p>(For clarity, I know that I am manually assigning the value of "1" instead of dynamically loading the ID. I did this just to see if it would work, and still no dice.)</p>