Почему мой Select2 не работает в проекте Laravel? - PullRequest
Новая
       8

Почему мой Select2 не работает в проекте Laravel?

0 голосов
/ 06 ноября 2018

В моем проекте у меня есть отношения многие ко многим между фильмами и актерами, а также фильмами и категориями. И когда я пытаюсь создать фильм, а затем пытаюсь добавить актеров и категории, используя Select2, в нем не отображаются доступные опции (поля ввода выглядят серыми, как будто они заблокированы). Я посмотрел, загружаются ли скрипты, и они есть. Вот мой код 

  MovieController:

  public function create()
  {  
    $actors = Actor::pluck('actor_name', 'id');
    $categories = Category::pluck('category_name', 'id');
    return view('movies.create', compact('actors', 'categories'));
  }

  create.blade.php:

       @extends('layouts.app')

       @section('title', '| Upload Movie')

       @section('stylesheets')

         {!! Html::style('css/select2.min.css') !!}

       @endsection

       @section('content')

         <div class="container">
            <div class="row">
                <div class="col-md-12">
                  <div class="row">
                    <div class="col-md-6">
                       {!! Form::open(['method'=>'POST', 'action'=> 'MovieController@store']) !!}
                      <div class="form-group">
                        {!! Form::label('movie_name', 'Name:') !!}
                        {!! Form::text('movie_name', null, ['class'=>'form-control'])!!}
                      </div>
                      <div class="form-group">
                        {!! Form::label('actor_id', 'Actors:') !!}
                        {!! Form::select('actor_id[]', $actors, null, ['class'=>'form-control select2-multi', 'multiple' => 'multiple']) !!}
                     </div>
                     <div class="form-group">
                        {!! Form::label('category_id', 'Category:') !!}
                        {!! Form::select('category_id[]', $categories, null, ['class'=>'form-control select2-multi', 'multiple' => 'multiple']) !!}
                     </div>
                     <div class="form-group">
                        {!! Form::submit('Upload Movie', ['class'=>'btn btn-primary']) !!}
                     </div>
                        {!! Form::close() !!}
                     </div>
                   </div>
                 </div>
             </div>
         </div>
         @endsection

         @section('scripts')

         {!! Html::script('js/select2.min.js') !!}

         <script type="text/javascript">

         $('.select2-multi').select2();

         </script> 

         @endsection

1 Ответ

0 голосов
/ 06 ноября 2018

Непосредственно из документации Select2:

DOM нельзя безопасно манипулировать, пока он не будет «готов». Чтобы убедиться, что ваша DOM готова, прежде чем браузер инициализирует элемент управления Select2, оберните ваш код в блок $ (document) .ready (). На страницу требуется только один блок $ (document) .ready ().

https://select2.org/getting-started/basic-usage

Итак, ваш код должен быть: 

<script type="text/javascript">
    $(document).ready(function() {
          $('.select2-multi').select2();
     });
</script>
...