Skip to content

Commit d146313

Browse files
committed
More about initSelection
In the past, `initSelection` was used for loading in data objects for the pre-selected options. Now that Select2 is using a `<select>` element, there is no need for doing this because the `<option>` elements should provide the relevant information. So you can now just pull this information from the remote data source (or static array, in some cases) and build out the `<option>` elements manually. In most cases you don't need to go the full length with a custom data adapter, but instead are just looking to pre-load elements on the initial page load. This improves select2#3116.
1 parent aa8978e commit d146313

2 files changed

Lines changed: 44 additions & 21 deletions

File tree

docs/announcements-4.0.html

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -375,17 +375,51 @@ <h3 id="removed-initselection">
375375
The new <code>current</code> method of the data adapter works in a similar
376376
way to the old <code>initSelection</code> method, with three notable
377377
differences. The first, and most important, is that <code>it is called
378-
whenever the current selections are needed</code> to ensure that Select2
379-
is always displaying the most accurate and up to date data. No matter
380-
what type of element Select2 is attached to, whether it supports a
381-
single or multiple selections, the data passed to the callback
382-
<strong>must be an array, even if it contains one selection</strong>.
383-
The last is that there is only one parameter, the callback to be
384-
executed with the latest data, and the current element that Select2 is
385-
attached to is available on the class itself as
386-
<code>this.$element</code>.
378+
whenever the current selections are needed</code> to ensure that Select2
379+
is always displaying the most accurate and up to date data. No matter
380+
what type of element Select2 is attached to, whether it supports a
381+
single or multiple selections, the data passed to the callback
382+
<strong>must be an array, even if it contains one selection</strong>.
383+
The last is that there is only one parameter, the callback to be
384+
executed with the latest data, and the current element that Select2 is
385+
attached to is available on the class itself as
386+
<code>this.$element</code>.
387387
</p>
388388

389+
<p>
390+
If you only need to load in the initial options once, and otherwise will
391+
be letting Select2 handle the state of the selections, you don't need to
392+
use a custom data adapter. You can just create the
393+
<code>&lt;option&gt;</code> tags on your own, and Select2 will pick up
394+
the changes.
395+
</p>
396+
397+
<pre class="prettyprint linenums">
398+
var $element = $('select').select2(); // the select element you are working with
399+
400+
var $request = $.ajax({
401+
url: '/my/remote/source' // wherever your data is actually coming from
402+
});
403+
404+
$request.then(function (data) {
405+
// This assumes that the data comes back as an array of data objects
406+
// The idea is that you are using the same callback as the old `initSelection`
407+
408+
for (var d = 0; d < data.length; d++) {
409+
var item = data[d];
410+
411+
// Create the DOM option that is pre-selected by default
412+
var option = new Option(data.text, data.id, true, true);
413+
414+
// Append it to the select
415+
$element.append(option);
416+
}
417+
418+
// Update the selected options that are displayed
419+
$element.trigger('change');
420+
});
421+
</pre>
422+
389423
<h3 id="query-to-data-adapter">
390424
Custom data adapters instead of <code>query</code>
391425
</h3>
@@ -643,7 +677,7 @@ <h3>.select2("val")</h3>
643677
</p>
644678

645679
<pre class="prettyprint linenums">
646-
$("select").val("1"); // instead of $("select").select2("val", "1");
680+
$("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");
647681
</pre>
648682

649683
<h3>.select2("enable")</h3>

docs/index.html

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -170,17 +170,6 @@ <h2>
170170
<a href="https://github.com/jquery/jquery-mousewheel">jquery.mousewheel</a>
171171
</td>
172172
</tr>
173-
<tr id="builds-amd">
174-
<td>
175-
AMD (<code>select2.amd.js</code> / <code>select2.amd.full.js</code>)
176-
</td>
177-
<td>
178-
This is the build that anyone who is using Select2 with an existing
179-
AMD build system should use. It is also recommended that you read
180-
the <a href="options.html#amd">AMD compatibility documentation</a>
181-
to avoid any unexpected issues.
182-
</td>
183-
</tr>
184173
</tbody>
185174
</table>
186175
</section>

0 commit comments

Comments
 (0)