How can I load Ajax Load Select With Select2?
mycode: (Wordpress Metabox)
$selectedArtist = get_post_meta($post->ID,'artist_id',true);
if($artists->have_posts()):
echo '<span>Please Select Artist : </span>';
echo '<select name="artist_id[]" class="skant-select" style="width: 90%;" multiple="multiple">';
echo '<option value="0">-- Please Select Artist --</option>';
while ($artists->have_posts()):
$artists->the_post();
echo '<option value="'.$artists->post->ID.'" '.selected(true,in_array($artists->post->ID,$selectedArtist)).' >'.get_the_title().'</option>';
endwhile;
echo '</select>';
wp_reset_postdata();
endif;
Using jQuery you could do something like this:
HTML
<select id="select">
<option value="">Please select</option>
<option value="v1">Value #1</option>
<option value="v3">Value #2</option>
<option value="v4">Value #3</option>
</select>
<div id="select2_container">
</div>
JavaScript
// Register onchange listener for 1st select
$('#select').change(function() {
if (this.value) {
// Load the HTML of the 2nd select from the server
// and place it in the container
$('#select2_container').load('/the/url', { value: this.value});
}
})
It would be also possible to just load the data for the select (e.g. as JSON) and not the complete HTML and then create/populate the select using JS.
For more info have a look at the jQuery docs