为什么我的 Select2 在 Laravel 项目中不起作用?



在我的项目中,电影和演员、电影和类别之间有很多对很多的关系。当我尝试创建一部电影,然后尝试使用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

直接从Select2文档:

DOM在"准备就绪"之前无法安全操作。为了确保在浏览器初始化Select2控件之前DOM已经准备好,请将代码包装在$(document(.ready((块中。每页只需要一个$(document(.ready((块。

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

所以你的代码应该是:

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

最新更新