Laravel - 表单输入 - 多重选择

Question

<div class="col-md-6">
  <div class="form-group">
    {!! Form::label('fiscal_responsabilities_id', __('business.fiscal_responsabilities_id') . ':') !!}
    {!! Form::select('fiscal_responsabilities_id[]', $fiscales, null, [
      'class' => 'form-control',
      'multiple' => 'multiple',
      'id' => 'fiscal_responsabilities_id'
    ]) !!}
  </div>
</div>

$(document).ready(function() {
    $('#fiscal_responsabilities_id').select2();
    $('#tributes_id').select2();
});

$fiscales = FiscalResponsability::pluck('name', 'id')->toArray();

我正在使用 Laravel 9。

尝试执行多重选择，我已经在没有 select2 脚本的情况下完成了它，但仍然无法让多重选择器正常工作。

Answer 1

看起来您正在使用 Laravel 的表单助手并尝试使用 Select2 实现多选下拉列表。如果多重选择无法正常工作，您可以检查以下几点：

1. 检查 HTML 渲染：

确保表单正确呈现。使用浏览器的开发人员工具检查

select

元素是否具有

multiple

属性和正确的名称 (

fiscal_responsabilities_id[]

)，这允许将多个值作为数组提交。

2. 添加 Select2 脚本和样式：

确保 Select2 已正确初始化并包含在您的项目中。检查 Select2 CSS 和 JS 文件是否都已加载：

<!-- Include jQuery first -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

3. 初始化选择2：

确保您的

select2()

初始化正确：

$(document).ready(function() {
    $('#fiscal_responsabilities_id').select2();
});

4. 确保正确的 HTML 标记：

确保

select

元素包含

multiple

属性和正确的名称语法：

{!! Form::select('fiscal_responsabilities_id[]', $fiscales, null, [
    'class' => 'form-control',
    'multiple' => 'multiple', // Make sure this is here
    'id' => 'fiscal_responsabilities_id'
]) !!}

5. 检查服务器端处理：

提交表单时，所选选项应该是一个数组。在服务器端，确保您在控制器中正确处理它：

$request->input('fiscal_responsabilities_id'); // This should return an array

6. 检查 Select2 是否正在加载：

确保 Select2 正常工作。您可以通过删除

multiple

属性来测试这一点，并查看 Select2 是否初始化。如果没有，加载 Select2 库可能会出现问题。

如果执行了上述所有步骤后仍然遇到问题，您可能需要通过检查浏览器控制台是否有错误或在表单完全加载后尝试初始化

select2()

方法来进一步排除故障。