在我的 jquery select2 搜索选项中没有出现

Question

我在模态中使用 Jquery select2()。我已经包含了页面从中获取布局的链接 int 布局文件

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

我的模态代码在这里：

<div class="modal-body">
                <select class="js-example-basic-single button3" name="state">
                    @foreach($brands??array() as $brand)
                        <option>
                            <div role="listitem" class="quicklinks__item quicklinks__item--nav w-dyn-item" style="width: 300px;">
                                <a id="Nav-Quicklink" href="/vehicles?brand={{ $brand->slug }}"
                                    class="quicklinks__link w-inline-block"><img
                                            src="{{url($brand->photo??'')}}"
                                            alt="Bugatti" class="quicklinks__logo" />
                                    <div class="quicklinks__details">
                                        <div class="quicklinks__title">{{ $brand->name }}</div>
                                    </div>
                                </a>
                            </div>
                        </option>
                    @endforeach
                </select>
            </div>

在这个文件中，我在脚本标签中添加了 jquery：

<script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });
</script>

但是搜索框没有出现。仅显示选择列表。

出了什么问题？我怎样才能得到搜索框？ TIA。 文件是here

Answer 1

看起来 select2 未应用于您的代码。你导入 jQuery 了吗？

添加

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

上面

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

Answer 2

删除这个库

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

并用这个库替换

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css'><link rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js' defer></script>

如果仍然不起作用，请尝试在声明 select2 时替换 ID 而不是 class

下拉菜单

<div class="modal-body">
                <select class="js-example-basic-single button3" name="state" id="test">
                    @foreach($brands??array() as $brand)
                        <option>
                            <div role="listitem" class="quicklinks__item quicklinks__item--nav w-dyn-item" style="width: 300px;">
                                <a id="Nav-Quicklink" href="/vehicles?brand={{ $brand->slug }}"
                                    class="quicklinks__link w-inline-block"><img
                                            src="{{url($brand->photo??'')}}"
                                            alt="Bugatti" class="quicklinks__logo" />
                                    <div class="quicklinks__details">
                                        <div class="quicklinks__title">{{ $brand->name }}</div>
                                    </div>
                                </a>
                            </div>
                        </option>
                    @endforeach
                </select>
            </div>

脚本

$(document).ready(function(){
$("#test").select2();   
});

PS：确保脚本在表单内（关闭标记之前）！！！