title: Select2 on bootstrap modal disappears when click option?
body: <p><a href="https://i.stack.imgur.com/ChEbl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ChEbl.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/DciaR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DciaR.png" alt="enter image description here"></a>
  Why select2 disappears when clicked on option results? it uses ajax source data, when search result is clicked the option select disappears.</p>
  
  <ul>
  <li>Select2 version : 4.0.5</li>
  <li>jQuery Version : jQuery v1.11.1</li>
  </ul>
  
  <p>I use codeigniter and here's my code :</p>
  
  <p>views</p>
  
  <pre><code>&lt;!-- Modal Tambah --&gt;
  &lt;div aria-hidden="true" aria-labelledby="myModalLabel" tabindex="-1" role="dialog" id="modal_form" class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button aria-hidden="true" data-dismiss="modal" class="close" type="button"&gt;×&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;&lt;/h4&gt;
              &lt;/div&gt;
                  &lt;form action="#" id="form" class="form-horizontal"&gt;
              &lt;!--    &lt;input type="hidden" value="" name="id"/&gt; --&gt;
                  &lt;div class="modal-body form"&gt;
                      &lt;div class="form-body"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="col-lg-3 col-sm-2 control-label"&gt;Tindakan Item&lt;/label&gt;
                              &lt;div class="col-lg-9"&gt;
  
                                  &lt;select name="tindakan_item_id" id="tindakan_item_id" class="select_tindakan_id form-control" autofocus="autofocus"&gt;&lt;/select&gt;
                                  &lt;span class="help-block"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;input type="hidden" name="layanan_pemeriksaan_id" value="&lt;?php echo $layanan_id; ?&gt;"&gt;
                          &lt;input type="hidden" name="layanan_tindakan_pasien_id" value="&lt;?php echo $layanan_id; ?&gt;"&gt;
  
                          &lt;button type="button" id="btnSave" onclick="save()" class="btn btn-primary"&gt;Save&lt;/button&gt;
                          &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- END Modal Tambah --&gt;
  </code></pre>
  
  <p>and here's the javascript code</p>
  
  <pre><code>$('.select_tindakan_id').select2({
      placeholder: '--- Silahkan Pilih ---',
      dropdownParent: $("#modal_form"),
      width: '100%',
      ajax: {
        url: '&lt;?php echo site_url('perawatan/layanan_tindakan_pasien_/search_tindakan'); ?&gt;',
        dataType: 'json',
        delay: 250,
        processResults: function (data) {
          return {
            results: data
          };
        },
        cache: true
      },
      minimumInputLength: 2
  });
  </code></pre>
  
  <p>controller</p>
  
  <pre><code>public function search_tindakan()
  {
      $json = [];
  
      $this-&gt;load-&gt;database();
      if(!empty($this-&gt;input-&gt;get("q"))){
          $this-&gt;db-&gt;like('nama', $this-&gt;input-&gt;get("q"));
          $query = $this-&gt;db-&gt;select('id,nama as text,tindakan_id')
                      -&gt;limit(10)
                      -&gt;get("tindakan_item");
          $json = $query-&gt;result();
      }
      echo json_encode($json);
  }
  </code></pre>