Append on the fly using AJAX and select it without refreshing page

Question

I have a select form, to which I add a new option on the fly using jQuery. After a new option is created, I want to select the newly created option.

My code for drawing up HTML for select

<div id="_vendor_select">
    <?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' );
    ?>
    <select id="_vendor" name="_vendor" class="form-control">
        <?php
        $posts = get_posts( array(
            'post_type' => 'vendor',
            'posts_per_page' => -1,
            'order' => 'title',
            'orderby' => 'ASC'
        ));
        if( $posts ) :
            foreach( $posts as $post ) :
                if( $post->ID === $default_vendor_id ) { $selected = 'selected="selected"'; } else { $selected = ''; }
                ?>
                <option value="<?php echo $post->ID; ?>" <?php echo $selected; ?>>
                    <?php echo get_the_title( $post->ID ); ?>
                </option>
            <?php endforeach; ?>
        <?php endif; ?>
        <option disabled>--------------------</option>
        <option value="create_new"><?php _e( 'Add a new vendor', 'book-keeper' ); ?></option>
    </select>-->
</div>

My code for creating a new vendor post (which is called after a new vendor post is created)

// Reload _vendor select div without refreshing the page
// At this point, the 'default vendor post' is pre-selected
jQuery('#_vendor').load(location.href+" #_vendor>*","");

// 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');

Here's the intended flow:

1. I draw up HTML for select to display all posts in 'vendor' custom post type, where one of the posts (which I call 'default vendor post') is pre-selected with selected="selected".
2. If an option with value='create_new' is selected, a bootstrap modal is opened to create a new vendor post using AJAX.
3. When the new vendor post is created successfully, reload the select form so that the newly created vendor post is included in the option.
4. The selected="selected" attribute is removed and the newly created option will have the attribute selected="selected".

Everything works good except for 4. Against my expectation, what actually happens is:

1. When page loads, select form is drawn with displaying all vendor posts and with 'default vendor post' pre-selected
2. A new vendor post is created using modal dialog and AJAX.
3. The selected="selected" attribute is removed from all <option>s.
4. The newly created vendor post <option>is selected.
5. select form is reloaded without refreshing the page, but with the 'default vendor post' selected.

In my code, I put the form reloading code before doing removal/addition of select attribute, but what really happens is vice-versa.

Why is this so? Getting frustrated...