Select2 插件在 Laravel 5.4 中不起作用答案

【问题标题】：The Select2 plugin not working in Laravel 5.4Select2 插件在 Laravel 5.4 中不起作用
【发布时间】：2017-05-15 11:27:50
【问题描述】：

我正在使用 laravel 5.4。现在我正在使用 select2 插件在多层次上显示我的选择选项。这是我的代码

@extends('layouts.app')

@section('content')
<html lang="">
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="matching_star" class="col-md-4 control-label">Matching Star</label>
                        <div class="col-md-6">
                            <select name="matching_star" class="form-control select2" id="matching-star" multiple>
                                <option value="aaa">aaa</option>
                                <option value="bbb">bbb</option>    
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="{{ URL::asset('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js') }}"></script>
<link rel="stylesheet" href="{{ URL::asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css') }}" />
<script type="text/javascript" src="{{ URL::asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js') }}"></script>

<script type="text/javascript">
    $('#matching-star').select2();
</script>

</html>
@endsection

我的 app.blade.php

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- Scripts -->
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                </div>
            </div>
        </nav>
    @yield('content')
    </div>

    <!-- Scripts -->
   <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

它不起作用，只有输入可见。当我单击输入时，它没有任何建议。如果我删除第一行 @extends('layouts.app') 那么它工作正常。我认为 App 布局中的 App.js 会覆盖 select2 插件。如何在不删除 App 布局的情况下实现多选？提前致谢。

【问题讨论】：

可以粘贴 layouts.app 的内容吗？
我已经添加了应用布局。问题出在 app.js 文件中。
好吧 .. 试着把那个文件也包括进去，我不认为有人能猜到里面有什么..
浏览器控制台是否出现错误？
不。我没有收到任何错误。输入可见，但没有建议

标签： php laravel jquery-select2 laravel-5.4 multi-select

【解决方案1】：

将您的 javascript 包装在这样准备好的文档中

<script>
$(document).ready(function() {
    $('#matching-star').select2();
});
</script>

【讨论】：

添加后我得到这个“TypeError: $(...).select2 is not a function”

【解决方案2】：

1) 请检查您选择的 jQuery OR jQuery.min 是否正确加载。

2) 否则，您的页面上会出现两次 jQuery。

我不确定，但只是检查一下。希望对你有帮助。

【讨论】：

【解决方案3】：

从视图中删除以下内容并再次检查：

<script type="text/javascript" src="{{ URL::asset('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js') }}"></script>

据我所知，Laravel 的默认 app.js 默认包含 jQuery。

【讨论】：