AJAX post dropdown

In de betreffende template

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
	function matchStart(params, data) {
    params.term = params.term || '';
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
        return data;
    }
    return false;
}
	$(document).ready(function() {
		$('#post-select').select2({
		  width: '100%',
		  placeholder: "Selecteer een vestiging",
		  allowClear: true,
		  matcher: function(params, data) {
		        return matchStart(params, data);
		    }
		});

});
</script>

 

<?php
$args = array(
	'post_type' => 'post',
	'post_status' => 'publish',
	'orderby' => 'title',
	'order'   => 'ASC',
	'posts_per_page' => -1,
	'caller_get_posts'=> 1
);
$postbox = null;
$postbox = new WP_Query($args);
if( $postbox->have_posts() ): ?>
<div class="col-xs-12">
<form name="jump">
<select id="post-select">
<option selected="selected">Select</option>
<?php while( $postbox->have_posts() ): $postbox->the_post(); ?>
<option value="<?php the_ID() ?>"><?php the_title(); ?></option>
<?php endwhile; ?>
</select>
</form>
<div id="post-selected-container"></div>
</div>
<script type="text/javascript">
(function($){
$('#post-select').change(function(){
$.ajax({
url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
type: 'post',
data: 'action=change_post&id=' + this.value,
success: function(output){
$('#post-selected-container').html(output);
}
});
});
})(jQuery);
</script>
<?php endif; wp_reset_query(); ?>

In functions.php

add_action("wp_ajax_nopriv_change_post", 'change_post');
add_action("wp_ajax_change_post", 'change_post');
function change_post()
{
$thepost = get_post($_POST['id']); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<?php the_content();
exit;
}

 

 

#AJAX #Select2