title: select2 changing value dynamically using jquery
body: <p>I have searched many answers and tried them but i am not able to change the value of select2 dropdown dynamically using jquery.</p>
  
  <p>I am using the ajax select2 getting the data remotely using json.</p>
  
  <p>dropdown is working fine.</p>
  
  <p>Here is what i have tried so far.</p>
  
  <pre><code>//UserGroupID is a variable contains the database value
  var groupSelector = $("#EditSpeciality");
  //1.
  groupSelector.select2("val", {ID: userGroupID, TEXT: "Lorem Ipsum"});
  //2.
  groupSelector.val(userGroupID).trigger("change");
  //3.
  groupSelector.select2("val", {ID: userGroupID, TEXT: "Lorem Ipsum"});
  //4.
  groupSelector.val(userGroupID);
  </code></pre>
  
  <p>But none of them seems to be changing the dropdown value.</p>
  
  <p>How to dynamically set the value..</p>
  
  <p>Here is my HTML.</p>
  
  <pre><code>&lt;select class="form-control select2" id="groupSelector" name="groupSelector" style="width: 100%;"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>=-=-=-=-=-=-=-=-=-=-=</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Im using codeigniter MVC, i know this should not matter. but want to put everything on the table here.</p>
  
  <p>The version of select2 is 4.0.0</p>
  
  <p>JSON code that i am getting is from Controller through which select2 is populating the list.</p>
  
  <p>Below is select2 Code.</p>
  
  <pre><code>function commonSelect2(selector,url,minInputLength,placeholder){
      selector.select2({
          minimumInputLength:minInputLength,
          placeholder:placeholder,
          ajax: {
              url: url,
              dataType: "json",
              delay: 250,
              data: function (params) {
                  return {
                      q: params.term, // search term
                      page: params.page
                  };
              },
              processResults: function (data) {
                  return {
                      results: $.map(data, function(obj) {
                          return { id: obj.ID, text: obj.TEXT };
                      })
                  };
              },
              cache: true
          },
          debug:false
      });
  }
  </code></pre>
  
  <p>i call the above function like this to initilize the dropdown in page.</p>
  
  <pre><code> // Speciality Selector for editing popup box
  var SelectorSpeciality = $("#EditSpeciality");
  var minInputLength = 0;
  var placeholder = "Select Speciality";
  var ConsultantSelectorURL = "' . base_url() . 'Admin/select_speciality";
  commonSelect2(SelectorSpeciality,ConsultantSelectorURL,minInputLength,placeholder);
  </code></pre>
  
  <p>the function resides in some <code>.js</code> file under assets/js directory.</p>
  
  <p>it helps me have the clean code and call the function whenever i want function.</p>
  
  <p>i think we can fix it with initselection but i don't know how to fix it with <strong>initselection</strong> i also did tried googling it but had no luck..</p>