Select2 占位符 UI 中断

Question

如果您看到屏幕截图，当我为多个选择框使用 select2 的占位符时。 当我从选择框中选择一些东西时它工作正常，但是当我看到默认占位符时。

我在做什么：我需要为 select2 框显示一个占位符，如何解决这个高度问题？

$('#search_user_events').select2({
            placeholder: 'Select events',
            multiple: true,
            allowClear: true,
            dropdownAutoWidth: true,
            width: '100%'
        });

<select class="form-control" id="search_user_events" name="search_user_events">
                                                    <option></option>
                                                    @foreach($events as $key => $event)
                                                        <option value="{{$event->id}}">{{$event->name}}</option>
                                                    @endforeach
                                                </select>

Answer 1

您的问题取决于第一个选项：默认情况下为空并选中....

您可以将translateY()与.toggleClass( function [, state ] )结合起来改变事件：

 $('#search_user_events').select2({ placeholder: 'Select events', multiple: true, allowClear: true, dropdownAutoWidth: true, width: '100%' }).on('change', function (e) { $('.select2-search__field').toggleClass('mcenter', $(this).val().length <= 1); }).trigger('change');

 .mcenter { transform: translateY(-60%); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> <select class="form-control" id="search_user_events" name="search_user_events"> <option></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select>