jQuery 模态中的 select2 出现问题

Question

我在模态中使用 jQuery select2...但它的外观不正确...您可以在下图中看到它...如何解决这个问题？问题只发生在模态内部。image

<div class="col">
   <label class="control-label">Department*</label>
      <select class="form-control select2" name="department_id">
         <option value="" selected>Select Department</option>
             @foreach ($departments as $value)
                <option value="{{ $value->id }}">{{ $value->name }}</option>
             @endforeach
     </select>
</div>

Jquery用于模态，

function viewCreate() {
        if (typeof device !== 'undefined')
            device.abort();
        device = $.ajax({
            type: 'GET',
            url: "devices/create/",
            dataType: 'JSON',
            async: true,
            beforeSend: function () {
                if (typeof device !== 'undefined')
                    device.abort();
            },
            success: function (response) {                   
                $('#showData').html(response.data);
                $('.showModal').modal('show');
            }
        });
    }

Answer 1

问题是因为 Select2 库在 DOM 中可见之前在模态的内容上被实例化。因此，它会导致渲染问题，因为无法准确计算元素使用的 space。

要解决此问题，您可以挂钩 shown.bs.modal 事件并在模式可见后初始化 Select2 元素：

// outside the AJAX call:
$('.showModal').on('shown.bs.modal', e => {
  $(e.target).find('.select2').select2({ /* your config options here... */ });
});

Answer 2

你需要像这样在js文件中调用你的select2:

$(document).ready(function() {
    $('#department_id').select2();
});

我不确定这是不是你的问题，但我希望它对你有用。

jQuery 模态中的 select2 出现问题

jQuery select2 appearence issue in modal

css

jquery

jquery-select2

bootstrap-modal