单击选项时，引导模式上的 Select2 消失？

Posted 2023-05-07

【中文标题】单击选项时，引导模式上的 Select2 消失？

【英文标题】：Select2 on bootstrap modal disappears when click option?

【发布时间】：2018-06-12 06:54:43

【问题描述】：

为什么单击选项结果时 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);

【问题讨论】：

我试图重现您的问题，但看不到任何问题。检查我的小提琴：jsfiddle.net/beaver71/82buut01

知道有什么问题吗？我用的是firefox浏览器，是不是和浏览器问题有关？

我的小提琴在 Firefox 57 上也能正常工作......也许你可以分享更多代码来了解是否有问题。你检查过我的小提琴吗？

是的，我检查了你的小提琴。

我在我的 js $("select").change(function() $(this).parent().parent().removeClass( '有错误'); $(this).next().empty(); ); 问题解决

【参考方案1】：

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

我正在使用

Select2 版本 4.0.11 jQuery 版本 3.4.1 引导程序版本 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();
);

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