Load Values In Select2 Multiselect

I'm using select2 in place of search box. Here i'm using to load countries values like this $('#countries').select2({ multiple: true, tags:['India', 'Japan', 'Australia','S

Solution 1:

Please have a look a documentation under section Loading Remote Data.

You will find and example like:

$("#e6").select2({
    placeholder: "Search for a movie",
    minimumInputLength: 1,
    ajax: { 
           // instead of writing the function to execute the request we use Select2's convenient helper
          url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json"
          // Other stuffs
          }
});

Also you can do like this:

$.getJSON('/dataprovider?data=fetchCountriesForm', function(opts){
    $("#countries").select2({
        data: opts
    });
})

Your JSON data must be in format like below:

[{id:0,text:'enhancement'},
 {id:1,text:'bug'},
 {id:2,text:'duplicate'},
 {id:3,text:'invalid'},
 {id:4,text:'wontfix'}
]

Solution 2:

I just use this http://ivaynberg.github.io/select2/#event_ext_change link and use the trigger function to load the values

$.getJSON('/dataprovider?data=fetchCountriesForm', function(opts) {
        parent.parent.parent.showLoader();
        if (opts) {
            $("#countries").val(opts).trigger("change");
        } 

This trick load the value in the select box.