Laravel 5.4 刀片和 select2 不工作

Posted 2023-05-07

【中文标题】Laravel 5.4 刀片和 select2 不工作

【英文标题】：Laravel 5.4 blades and select2 not working

【发布时间】：2017-10-05 09:28:14

【问题描述】：

我很难让 select2 js lib 在 laravel 中工作，控制台中没有错误。我的刀片文件：

@extends('layouts.app')

@section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div >
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dodaj nowy podmiot</div>
                <div class="panel-body">
                    <div >
                        <div>
                            <form>
                                <div class="form-group">
                                    <select class="js-example-basic-single">
                                        <option value="AL">Alabama</option>
                                        <option value="WY">Wyoming</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $(".js-example-basic-single").select2();
</script>
@endsection

它只改变了项目的 CSS，但是即使它是可点击的，也没有任何反应，它不显示选项，下拉菜单也不出现。

以前有没有人遇到过这样的问题？

【参考方案1】：

那是因为defer。

在app.blade.php 文件中有如下声明。

<script src=" asset('js/app.js') " defer></script>

在这里删除defer 并使其像

<script src=" asset('js/app.js') "></script>

会有用的

【参考方案2】：

好的，我已经通过在布局刀片中注释这一行来解决这个问题：

<!-- <script src=" asset('js/app.js') "></script> !-->

所以，laravel 中包含的默认 js 文件导致了 select2 库的问题。

感谢您的帮助

【讨论】：

我会的：）。需要等待 18 小时才能接受。

有没有不注释app.js的解决方案，因为我们在其他一些页面中也使用了布局刀片。如果我们注释掉，那么默认的 jquery 将不起作用。

【参考方案3】：

您是否尝试将 select 实例化代码包装在 ready 子句中？

$( document ).ready(function() 

  $(".js-example-basic-single").select2();

编辑：

您的 javascript 导入中缺少 type="text/javascript"。如果没有该标签，某些浏览器将不会执行 JavaScript。尝试修复它，看看它是否有效。

【讨论】：

是的，我试过了，但它表明 select2 不是一个函数，所以我假设它与 laravel 渲染刀片的方式有关。

Laravel 刀片渲染只是用 html/JS 创建一个字符串。它并不会真正影响您的 JS 的执行方式。这可能是因为浏览器接收到的 HTML 没有正确的 jQuery/select2 库导入。

您在脚本导入中缺少 type= text/javascript。这就是问题所在。

你错了，'type="text/javascript"' 是可选的，现代网络浏览器知道如何处理 ，只有当你会编写类似 之类的东西，它不会像 JS 那样运行它。所以这不是问题。据我在网络选项卡中看到的，它可以正确加载内容。我还通过将其粘贴到原始 html 文件来检查此代码，它工作正常。所以它必须与laravel有关。

所以你是说如果你以某种方式复制 HTML，它可以工作，但如果 Laravel 提供完全相同的 HTML，它不会工作？显然，您必须从刀片返回其他内容，而不是手动粘贴原始 html 时有效的内容。因此，只需比较差异并修复它，因为 Web 浏览器并不关心后端是 Laravel 还是 Node.js 还是一群在塑料管道里放屁的猴子。它只关心它得到的响应。