Select2 on bootstrap modal disappears when click option?

Question

Why select2 disappears when clicked on option results? it uses ajax source data, when search result is clicked the option select disappears.

• Select2 version : 4.0.5
• jQuery Version : jQuery v1.11.1

I use codeigniter and here's my code :

views

<!-- Modal Tambah -->
<div aria-hidden="true" aria-labelledby="myModalLabel" tabindex="-1" role="dialog" id="modal_form" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title"></h4>
            </div>
                <form action="#" id="form" class="form-horizontal">
            <!--    <input type="hidden" value="" name="id"/> -->
                <div class="modal-body form">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="col-lg-3 col-sm-2 control-label">Tindakan Item</label>
                            <div class="col-lg-9">

                                <select name="tindakan_item_id" id="tindakan_item_id" class="select_tindakan_id form-control" autofocus="autofocus"></select>
                                <span class="help-block"></span>
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="layanan_pemeriksaan_id" value="<?php echo $layanan_id; ?>">
                        <input type="hidden" name="layanan_tindakan_pasien_id" value="<?php echo $layanan_id; ?>">

                        <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- END Modal Tambah -->

and here's the javascript code

$('.select_tindakan_id').select2({
    placeholder: '--- Silahkan Pilih ---',
    dropdownParent: $("#modal_form"),
    width: '100%',
    ajax: {
      url: '<?php echo site_url('perawatan/layanan_tindakan_pasien_/search_tindakan'); ?>',
      dataType: 'json',
      delay: 250,
      processResults: function (data) {
        return {
          results: data
        };
      },
      cache: true
    },
    minimumInputLength: 2
});

controller

public function search_tindakan()
{
    $json = [];

    $this->load->database();
    if(!empty($this->input->get("q"))){
        $this->db->like('nama', $this->input->get("q"));
        $query = $this->db->select('id,nama as text,tindakan_id')
                    ->limit(10)
                    ->get("tindakan_item");
        $json = $query->result();
    }
    echo json_encode($json);
}

Jab

I tried to reproduce your issue but I can't see any problem. Check my fiddle: jsfiddle.net/beaver71/82buut01 – Yellowbird

any idea what's wrong? I use firefox browser, is it related with browser issue? – Jab

My fiddle works correctly also on Firefox 57... Maybe you can share more code to understand if there is something wrong. Do you checked my fiddle? – Yellowbird

yes, I've check your fiddle. – Jab

I found an error because of this code on my js <code> $("select").change(function(){ $(this).parent().parent().removeClass('has-error'); $(this).next().empty(); }); </code> Problem Solved – Jab

facing same problem, random issue, sometimes works perfect sometimes after clicking it suddenly disappears. – Shane

Answer 1

I have same problem today, after get the solution I just see your last feedback that has been solve by yourself. My solution is by add .not() selector for exclude select2 element from the function effect.

I am using

• Select2 version 4.0.11
• jQuery version 3.4.1
• Bootstrap version 4.3.1

Before

$("select").change(function(){
    $(this).parent().parent().removeClass('has-error');
    $(this).next().empty();
});

After

$("select").not('.select2').change(function(){
    $(this).parent().parent().removeClass('has-error');
    $(this).next().empty();
});

Hope can help other who search solution for similar problem.

Glossolalia