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

Posted 2023-03-14

【中文标题】在我的 jquery select2 搜索选项中没有出现

【英文标题】：In my jquery select2 search option isnt appearing

【发布时间】：2020-12-17 01:11:39

【问题描述】：

我在模态中使用 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??'')"
                                             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

【参考方案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>

【讨论】：

是的。其在 select2.min.js 上方的布局文件中导入

你可以在这里看到它github.com/yasirarafat28/Royaltyexoticcars/blob/master/…

你检查控制台输出了吗？也许有一些错误并指导我们。

控制台引用未捕获的类型错误：$(...).select2 不是函数。但我在布局文件中包含了链接

你可以尝试将 select2 js 文件移动到

【参考方案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??'')"
                                             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：确保脚本在表单内（关闭标记之前）！！！

【讨论】：

你可以在这里查看github.com/yasirarafat28/Royaltyexoticcars/blob/master/…

文件不大

@NabidAnzum 你试过用 id 替换类吗？

是的，我做到了。 @史蒂文94

控制台指的是Uncaught TypeError: $(...).select2 is not a function