Setting default values in select2 with AJAX call?

Question

I have two examples.

This one is with a normal select2 with static inputs which works with default fields beforehand: http://jsfiddle.net/z96Ca/2/

Next is a select2 with an ajax call and the default values are not being added into the box - why?! http://jsfiddle.net/z96Ca/1/

I've been fiddling for a while but can't work out how to add the values beforehand when there's an ajax call as well.

Here's the line that usually adds the code beforehand:

$(test).val(["test1","test2"]).trigger("change");

Hope I'm clear enough

Thanks a lot

Ghoul

Answer 1

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.

Wilks

Thanks John - When I get a minute I'll see if I can get it working! Will report back soon. – Ghoul

That is great solution, for what i'm finding. Thank you so much! – Hyland

Any update for this answer for Select2's latest version? – Ghoul

@JackNicholson - I updated my answer for Select2 v4. – Wilks

this is the only solution that has worked for me, thanks. – Conidium

Answer 2

There is no initSelection in the newer versions of select2.

Naamana

Probably best to comment on the answer and maybe John S will update his answer. – Ghoul

I need 50 reputation to comment on an answer, So I posted it as a different answer, I thought information will be usefull someone who trying the same solution with the latest version. – Naamana

Definitely! I let John know and he's updated his answer for the latest version which was good of him. :) – Ghoul