title: How to fetch and display selected value into <select2> tag in my Edit Form using ajax (codeigniter)
body: <p>I create one form which includes select2 control.and i have data in database.</p>
  <p>Now I want to fetch value of particular data value into select2 control when edit the form. My selected select value is store in one variable Now i want that value dispaly in select2 control inside the edit form and i dont know how ..</p>
  <p>here is my edit form code:</p>
  <pre><code>&lt;div id=&quot;editm&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;
   &lt;div class=&quot;modal-dialog modal-sm&quot; role=&quot;document&quot;&gt;
  &lt;div class=&quot;modal-content&quot;&gt;
    &lt;div class=&quot;modal-header&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
      &lt;h4 class=&quot;modal-title&quot;&gt;Update Rayon&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class=&quot;modal-body&quot;&gt;
      &lt;form id=&quot;validate1&quot; method=&quot;POST&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
         &lt;label class=&quot;control-label&quot;&gt;Kode Rayon&lt;/label&gt;
          &lt;div&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;edit_Kode_rayon&quot; name=&quot;edit_Kode_rayon&quot; placeholder=&quot;Kode Rayon&quot; readonly&gt;
           &lt;/div&gt;
          &lt;/div&gt;
  
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label class=&quot;control-label&quot;&gt;Nama Rayon&lt;/label&gt;
              &lt;div&gt;
                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;edit_nama_rayon&quot; name=&quot;edit_nama_rayon&quot; placeholder=&quot;Nama Center&quot; &gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label class=&quot;control-label&quot;&gt;Nama Region&lt;/label&gt;
              &lt;div&gt;
              &lt;!-- HERE IS THE SELECT2 THAT IM TALKING ABOUT.. --&gt;
                &lt;select class=&quot;form-control kode_region&quot; id=&quot;nRegionE&quot; name=&quot;kode_region&quot; style=&quot;width: 100%;&quot;&gt;
                  &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
        &lt;button type=&quot;button&quot; id=&quot;update&quot; class=&quot;btn btn-primary&quot;&gt;Update&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
    
  <p>here is jquery code for edit button:</p>
  <pre><code>$(document).on(&quot;click&quot;, &quot;#edit&quot;, function(e){
     e.preventDefault();
     var editid = $(this).attr(&quot;value&quot;);
   $.ajax({
        url: &quot;&lt;?php echo base_url();?&gt;Rayon/editdata&quot;,
        type: &quot;POST&quot;,
        dataType: &quot;json&quot;,
        data:{editid: editid},
        success: function(data){
        if(data.responce == &quot;success&quot;){
           $('#editm').modal('show');
           $(&quot;#edit_Kode_rayon&quot;).val(data.posts.kode_rayon);
           $(&quot;#edit_nama_rayon&quot;).val(data.posts.nama_rayon);
           //$(&quot;#nRegionE&quot;).val(data.posts.kode_region);&lt;-- I TRIED LIKE THIS .. NOT WORK --&gt;
           //$(&quot;#nRegionE&quot;).select2().select2('val',data.posts.kode_region);&lt;-- I TRIED LIKE THIS . NOT WORK--&gt;
           $('#nRegionE').val(data.posts.kode_region).trigger(&quot;change&quot;);&lt;-- EVEN THIS ONE IS NOT WORK --&gt;
        }else{
           toastr[&quot;error&quot;](data.message);}
        }
        });
        });
  </code></pre>
  <p>and here is my Select2 script that im using it for inssert and my edit form:</p>
  <pre><code>$(function () {$('.kode_region').select2({
   //placeholder: &quot;Please select region&quot;,allowClear: true,
   ajax: {
  dataType: 'json',
  url: '&lt;?=site_url('Bonus/nregion')?&gt;',
  type: &quot;post&quot;,
  delay: 250,
  data: function(params) {
    return {search: params.term}},
    processResults: function (data, page) {
      return {results: data};
    },
  }
  })}); 
  </code></pre>
  <p>just to make it clear i took a screenshot of my edit form:</p>
  <p><a href="https://i.stack.imgur.com/mJX4W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mJX4W.png" alt="enter image description here" /></a></p>
  <p>all what i want is to fetch the value of data into select2 form control of Edit Form .. can anyone help me to do that ? n i'll be so thankful.</p>