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
});

控制器

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

我今天遇到了同样的问题，在找到解决方案后，我只看到您自己已解决的最后反馈。我的解决方案是通过添加.not（）选择器从功能效果中排除select2元素。

我正在使用

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

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

单击选项时，bootstrap模式上的Select2会消失吗？

1 个答案: