如何使用Select2进行Ajax加载选择？

Question

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;

Answer 1

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