javascript - Select 2 仅作用于数组的第一个元素

Question

我有一个数组，并且正在该数组中使用 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>

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

Answer 1

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

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

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