Tukukkk

Maybe this work for you!!
This works for me...

initSelection: function (element, callback) {



            callback({ id: 1, text: 'Text' });

}

Check very well that code is correctly spelled, my issue was in the initSelection, I had initselection

Updated to new version:

Try this solution from here http://jsfiddle.net/EE9RG/430/

$('#sel2').select2({

multiple:true,

ajax:{}}).select2({"data": 

     [{"id":"2127","text":"Henry Ford"},{"id":"2199","text":"Tom Phillips"}]});

Ravi, for 4.0.1-rc.1:

1. Add all <option> elements inside <select>.


2. call $element.val(yourarray).trigger("change"); after select2 init function.

HTML:

<select name="Tags" id="Tags" class="form-control input-lg select2" multiple="multiple">

       <option value="1">tag 1</option>

       <option value="2">tag 2</option>

       <option value="3">tag 3</option>

 </select>

JS:

var $tagsControl = $("#Tags").select2({

        ajax: {

            url: '/Tags/Search',

            dataType: 'json',

            delay: 250,

            results: function (data) {

                return {

                    results: $.map(data, function (item) {

                        return {

                            text: item.text,

                            id: item.id

                        }

                    })

                };

            },

            cache: false

        },

        minimumInputLength: 2,

        maximumSelectionLength: 6

    });



    var data = ;

    var tags = $("#Tags option").each(function () {

        data.push($(this).val());

    });

    $tagsControl.val(data).trigger("change");

This issue was reported but it still opened.
https://github.com/select2/select2/issues/3116#issuecomment-146568753

A very weird way for passing data. I prefer to get a JSON string/object from server and then assign values and stuff.

Anyway, when you do this var elementText = $(element).attr('data-initvalue'); you're getting this [{"id":"IN","name":"India"}]. That result you must PARSE it as suggested above so you can get the real vales for id ("IN") and name("India"). Now there are two scenarios, multi-select & single-value Select2.

Single Values:

$(element).select2({

    initSelection : function (element, callback) {

        var data = {id: "IN", text: "INDIA"};

        callback(data);

    }//Then the rest of your configurations (e.g.: ajax, allowClear, etc.)

});

Multi-Select

$("#tags").select2({

    initSelection : function (element, callback) {

        var countryId = "IN"; //Your values that somehow you parsed them

        var countryText = "INDIA";



        var data = ;//Array



        data.push({id: countryId, text: countryText});//Push values to data array





        callback(data); //Fill'em

    }

});

NOW HERE'S THE TRICK! Like belov91 suggested, you MUST put this...

$(element).select2("val", );

Even if it's a single or multi-valued Select2. On the other hand remember that you can't assign the Select2 ajax function to a <select> tag, it must be an <input>.

Hope that helped you (or someone).

Bye.

I`ve added

initSelection: function (element, callback) {



      callback({ id: 1, text: 'Text' });

}

BUT also

.select2('val', );

at the end.

This solved my issue.

var elem = $("#container").find("[name=elemMutliOption]");

for (var i = 0; i < arrDynamicList.length; i++)

{

   elem.find("option[value=" + arrDynamicList[i] + "]").attr("selected", "selected");

}

elem.select2().trigger("change");

This will work for people who are using the same view for multiple section in the page, with that being said it will work the same way for auto-setting defaults in your page OR better a EDIT page.

The "FOR" goes through the array that has existing options already loaded in the DOM.

Change the value after the page loads

$('#data').val('').change();

you can use the following

$(element).select2("data",[ { id: result.id, text: "جابر احمد الصباح" },

    { id: 2, text: "خليل محمد خليل" }]);

In my case the problem was rendering the output.. So I used the default text if the ajax data is not present yet.

  templateSelection: function(data) {

    return data.name || data.element.innerText;

  }

Late :( but I think this will solve your problem.

 $("#controlId").val(SampleData [0].id).trigger("change");

After the data binding

 $("#controlId").select2({

        placeholder:"Select somthing",

        data: SampleData // data from ajax controll

    });

    $("#controlId").val(SampleData[0].id).trigger("change");