选择 2 仅适用于数组的第一个元素答案

【问题标题】：Select 2 only working on the first element of an array选择 2 仅适用于数组的第一个元素
【发布时间】：2018-01-23 19:10:07
【问题描述】：

我有一个数组，并在该数组中使用 select 2。选择 2 正在处理第一个元素，但在其他元素中选择 2 不起作用。

我的html：

@foreach($quizzes as $quiz)

<select class="js-example-basic-multiple grades" multiple id="grades" name="grades[]">
<option value="1">Form 1 History</option>
<option value="2">Form 2 History</option>    
</select>
@endforeach

我的脚本：

 <script>
$("#grades").select2();
$("#checkbox").click(function(){
  if($("#checkbox").is(':checked') ){
    $("#grades > option").prop("selected","selected");// Select All Options
    $("#grades").trigger("change");// Trigger change to select 2
  }
  else{
    $("#grades > option").removeAttr("selected");
    $("#grades").trigger("change");// Trigger change to select 2
  }
});

$("#button").click(function(){
  alert($("#grades").val());
});
$("#grades").select2({
  placeholder: "To be done by...",
  allowClear: true
});

 </script>

我似乎无法找出问题所在。

【问题讨论】：

我认为是因为您使用的是 id="grades"，请尝试 class="grades"
是的，应该这样做。 id="grades" 到 class="grades" 和 $("#grades").select2(); 到 $(".grades").select2();。 ID 的想法是它们是唯一的，但是您正在创建具有相同 ID 的多个 DOM。 select2 在 ID 上分配 select2 并且不检查相同 ID 的任何其他元素。

标签： javascript jquery laravel jquery-plugins jquery-select2

【解决方案1】：

尝试通过类名而不是 ID 来初始化 select2。元素 ID 在整个 DOM 中应该是唯一的。

$(".grades").select2({
  placeholder: "To be done by...",
  allowClear: true
});

并删除第一个$("#grades").select2();

【讨论】：

在某些最新版本的 select2 中，此功能不起作用。