twitter-bootstrap - 单击选项时， Bootstrap 模式上的 Select2 消失？

Question

为什么单击选项结果时 select2 会消失？它使用 ajax 源数据，当单击搜索结果时，选项选择消失。

Select2 版本:4.0.5

jQuery 版本:jQuery v1.11.1

我使用 codeigniter，这是我的代码:

意见

<!-- 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 -->

这是javascript代码

$('.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);
}

Answer 1

我今天也遇到了同样的问题，得到解决方案后，我才看到你最后的反馈，已经自己解决了。我的解决方案是为从函数效果中排除 select2 元素添加 .not() 选择器。

我在用

Select2 版本 4.0.11

jQuery 版本 3.4.1

Bootstrap 版本 4.3.1

前

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

后

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

希望可以帮助其他寻找类似问题的解决方案的人。