Javascript 选择2仅处理数组的第一个元素

我有一个数组，正在该数组中使用select 2。Select 2正在处理第一个图元，但在其他图元中，Select 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初始化select2。元素ID在整个DOM中应该是唯一的

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

---

并删除前$grades。选择2

我想是因为你用的是id=grades，试试class=gradesy是应该这样做的。id=等级到等级=等级和$grades。选择2；至$.grades。选择2；。ID的概念是它们是唯一的，但是您正在使用相同的ID创建多个DOM。select2在ID上分配select2，而不检查相同ID的任何其他元素。