title: Dynamically edit option in select2
body: <p>I have a multiselect widget which I'm using select2 for. I load the options through AJAX and it is all working fine.</p>
  
  <p>However, I added a clickable 'edit' icon to the options as they appear in the field of selected items, right next to the 'delete' icon. I have hooked this up to a modal form which edits the items through AJAX. After the edit is successful I obviously want to update the selected option in the select2 field to match this.</p>
  
  <p>Is there a way to edit the selected options in this way with select2?</p>
  
  <p>I have tried editing the  tag and executing .trigger('change') on the option but it didn't do anything. I also looked at the examples of programmatic access in the select2 documentation but they seemed to be more about selecting already existing options than editing the 'text' of the options themselves.</p>
  
  <p>Any help appreciated.</p>
  
  <p>This is how I have set up my select2 widget:</p>
  
  <pre><code>function formatFlavorSelection(flavor) {
      var $flavor = $(
          '&lt;span class="glyphicon glyphicon-pencil" onClick="editFlavorSelection(' + flavor.id + ', event);"&gt;&lt;/span&gt;&lt;span&gt;' + flavor.text + '&lt;/span&gt;'
      );
  return $flavor;
  </code></pre>
  
  <p>};</p>
  
  <pre><code>$(".select2-flavor").select2(
      ajax: {
          url:url,
          dataType: 'json',
          delay: 250,
          data: function (params) { 
              return { 
                  q: params.term // search term
              };
          },
          processResults: function (data, page) {
              var resultData = [];
              data.forEach(function(entry) {
                  resultData.push({ id: entry.id, text: entry[dataName]})
              });
              return {
                  results: resultData
              };
          },
          cache: true
      },
      minimumInputLength: 0,
      templateSelection = formatFlavorSelection
  );
  </code></pre>