title: Append <option> on the fly using AJAX and select it without refreshing page
body: <p>I have a <code>select</code> form, to which I add a new <code>option</code> on the fly using jQuery. After a new <code>option</code> is created, I want to select the newly created option.</p>
  
  <p>My code for drawing up HTML for <code>select</code></p>
  
  <pre><code>&lt;div id="_vendor_select"&gt;
      &lt;?php
          // This retrieves the post ID based on a given rule
          // As a result, the post with $default_vendor_id will be selected on default
          $default_vendor_id = fnc_get_default_by_posttype( 'vendor' );
      ?&gt;
      &lt;select id="_vendor" name="_vendor" class="form-control"&gt;
          &lt;?php
          $posts = get_posts( array(
              'post_type' =&gt; 'vendor',
              'posts_per_page' =&gt; -1,
              'order' =&gt; 'title',
              'orderby' =&gt; 'ASC'
          ));
          if( $posts ) :
              foreach( $posts as $post ) :
                  if( $post-&gt;ID === $default_vendor_id ) { $selected = 'selected="selected"'; } else { $selected = ''; }
                  ?&gt;
                  &lt;option value="&lt;?php echo $post-&gt;ID; ?&gt;" &lt;?php echo $selected; ?&gt;&gt;
                      &lt;?php echo get_the_title( $post-&gt;ID ); ?&gt;
                  &lt;/option&gt;
              &lt;?php endforeach; ?&gt;
          &lt;?php endif; ?&gt;
          &lt;option disabled&gt;--------------------&lt;/option&gt;
          &lt;option value="create_new"&gt;&lt;?php _e( 'Add a new vendor', 'book-keeper' ); ?&gt;&lt;/option&gt;
      &lt;/select&gt;--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My code for creating a new vendor post (which is called after a new vendor post is created)</p>
  
  <pre><code>// Reload _vendor select div without refreshing the page
  // At this point, the 'default vendor post' is pre-selected
  jQuery('#_vendor').load(location.href+" #_vendor&gt;*","");
  
  // Remove existing select attribute
  jQuery('#_vendor').find('option').each(function () {
      jQuery(this).removeAttr('selected');
  });
  
  // Select newly created vendor
  // result.post_id is the ID of the newly created vendor post, returned from the AJAX function
  jQuery('#_vendor').val(result.post_id).change();
  jQuery('#_vendor').find('option[value="'+result.post_id+'"]').attr('selected', 'selected');
  </code></pre>
  
  <p>Here's the intended flow:</p>
  
  <ol>
  <li>I draw up HTML for <code>select</code> to display all posts in 'vendor' custom post type, where one of the posts (which I call '<strong>default vendor post</strong>') is pre-selected with <code>selected="selected"</code>.</li>
  <li>If an <code>option</code> with <code>value='create_new'</code> is selected, a bootstrap modal is opened to create a new vendor post using AJAX.</li>
  <li>When the new vendor post is created successfully, reload the <code>select</code> form so that the newly created vendor post is included in the <code>option</code>.</li>
  <li>The <code>selected="selected"</code> attribute is removed and the newly created <code>option</code> will have the attribute <code>selected="selected"</code>.</li>
  </ol>
  
  <p>Everything works good except for 4. Against my expectation, what actually happens is:</p>
  
  <ol>
  <li>When page loads, <code>select</code> form is drawn with displaying all vendor posts and with 'default vendor post' pre-selected</li>
  <li>A new vendor post is created using modal dialog and AJAX.</li>
  <li>The <code>selected="selected"</code> attribute is removed from all <code>&lt;option&gt;</code>s.</li>
  <li>The newly created vendor post <code>&lt;option&gt;</code>is selected. </li>
  <li><code>select</code> form is reloaded without refreshing the page, but with the 'default vendor post' selected.</li>
  </ol>
  
  <p>In my code, I put the form reloading code before doing removal/addition of <code>select</code> attribute, but what really happens is vice-versa.</p>
  
  <p>Why is this so? Getting frustrated...</p>