Since you are backing your Select2 with an input element, rather than a select element, and it allows multiple selection, I believe you need to define an initSelection function.
Add the following option:
initSelection: function (element, callback) {
callback($.map(element.val().split(','), function (id) {
return { id: id, text: id };
}));
}
jsfiddle
Note: Instead of calling the following:
$(test).val(["test1","test2"]).trigger("change");
You could have called this:
$(test).select2('val', ["test1","test2"], true);
And when you do that without defining an initSelection function, you get the following error:
Error: Error: val() cannot be called if initSelection() is not defined
Note: I think the reason your first (non-ajax) example works without defining an initSelection function is because it specifies the tags option.
UPDATE: Select2 v4
When using Select2 v4, you should always back the Select2 control with a <select> element, not a hidden input.
<select id="test" style="width: 300px;" multiple="multiple">
</select>
Note: You can still specify multiple: true in the options, but you can also use the multiple attribute of the <select> element.
You can set default values by including selected options in the html or by programmatically adding selected options to the <select> element, after which you should trigger a change-event on the element so its display is updated.
$test.append('<option value="initial1" selected="selected">initial1</option>');
$test.append('<option value="initial2" selected="selected">initial2</option>');
$test.trigger('change');
In this case, the initSelection function is no longer needed (or allowed).
jsfiddle
Note: Select2 does have a "full" version which supports some backward compatibility. That may also be an option.
