From 54da5be1f15fc2dd0f10912fe58c946a22cb8eae Mon Sep 17 00:00:00 2001
From: danhorton7 <danielhorton@me.com>
Date: Fri, 22 Feb 2019 17:37:23 +0000
Subject: [PATCH] Update docs.md

example code for Preselecting options in an remotely-sourced (AJAX) Select2 with multiple values
---
 .../01.add-select-clear-items/docs.md         | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/pages/12.programmatic-control/01.add-select-clear-items/docs.md b/pages/12.programmatic-control/01.add-select-clear-items/docs.md
index 362c9fe..21527be 100644
--- a/pages/12.programmatic-control/01.add-select-clear-items/docs.md
+++ b/pages/12.programmatic-control/01.add-select-clear-items/docs.md
@@ -92,6 +92,36 @@ $.ajax({
 
 Notice that we manually trigger the `select2:select` event and pass along the entire `data` object.  This allows other handlers to [access additional properties of the selected item](/programmatic-control/events#triggering-events).
 
+### Preselecting options in an remotely-sourced (AJAX) Select2 with multiple values
+```
+$('.studentSelect').select2({
+    ajax: {
+        url: '/api/students',
+    },
+    });
+    // Fetch the preselected item, and add to the control
+var studentSelect = $('.studentSelect');
+$.ajax({
+    type: 'GET',
+    url: '/api/students/s/' + student_id
+}).then(function (data) {
+    console.log(data);
+    // create the option and append to Select2
+    data.results.forEach(function(d) {
+        var option = new Option(d.full_name, d.id, true, true);
+        studentSelect.append(option).trigger('change');
+    });
+
+    // manually trigger the `select2:select` event
+    studentSelect.trigger({
+        type: 'select2:select',
+        params: {
+            data: data
+        }
+    });
+});
+```
+
 ## Clearing selections
 
 You may clear all current selections in a Select2 control by setting the value of the control to `null`: