Select2插件不能在Laravel 5.4中工作

我正在使用laravel 5.4。現在我正在使用select2插件在多級顯示我的選擇選項。在這裏我的代碼是Select2插件不能在Laravel 5.4中工作

@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插件。如何在不移除應用程序佈局的情況下實現多選？提前致謝。

來源

2017-05-15 balaraman

你能粘貼layouts.app內容嗎？ – Alex

我已添加應用程序佈局。問題來自app.js文件。 – balaraman

那麼..試圖包括該文件，那麼，我不認爲有人可以猜到那裏有什麼.. – Alex

包文件在你的JavaScript準備這樣

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

來源

2017-05-15 11:33:31 Alex

添加後，我得到了這個「TypeError：$（...）。select2不是一個函數」 – balaraman

1）請檢查您選擇的jQuery或jQuery.min正確加載與否。

2）其他智能jQuery在您的頁面上顯示兩次。

我不確定，只是檢查它。我希望這是有幫助的。

來源

2017-05-15 12:19:16

從視圖中刪除以下，並再次檢查：

<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的默認。

來源

2017-05-15 13:15:40

Select2插件不能在Laravel 5.4中工作

回答

相關問題