current method of the data adapter works in a similar
way to the old initSelection method, with three notable
differences. The first, and most important, is that it is called
- whenever the current selections are needed to ensure that Select2
- is always displaying the most accurate and up to date data. No matter
- what type of element Select2 is attached to, whether it supports a
- single or multiple selections, the data passed to the callback
- must be an array, even if it contains one selection.
- The last is that there is only one parameter, the callback to be
- executed with the latest data, and the current element that Select2 is
- attached to is available on the class itself as
- this.$element.
+ whenever the current selections are needed to ensure that Select2
+ is always displaying the most accurate and up to date data. No matter
+ what type of element Select2 is attached to, whether it supports a
+ single or multiple selections, the data passed to the callback
+ must be an array, even if it contains one selection.
+ The last is that there is only one parameter, the callback to be
+ executed with the latest data, and the current element that Select2 is
+ attached to is available on the class itself as
+ this.$element.
+
+ If you only need to load in the initial options once, and otherwise will
+ be letting Select2 handle the state of the selections, you don't need to
+ use a custom data adapter. You can just create the
+ <option> tags on your own, and Select2 will pick up
+ the changes.
+
+var $element = $('select').select2(); // the select element you are working with
+
+var $request = $.ajax({
+ url: '/my/remote/source' // wherever your data is actually coming from
+});
+
+$request.then(function (data) {
+ // This assumes that the data comes back as an array of data objects
+ // The idea is that you are using the same callback as the old `initSelection`
+
+ for (var d = 0; d < data.length; d++) {
+ var item = data[d];
+
+ // Create the DOM option that is pre-selected by default
+ var option = new Option(data.text, data.id, true, true);
+
+ // Append it to the select
+ $element.append(option);
+ }
+
+ // Update the selected options that are displayed
+ $element.trigger('change');
+});
+
+
query
-$("select").val("1"); // instead of $("select").select2("val", "1");
+$("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");
select2.amd.js / select2.amd.full.js)
-