選択2は配列の最初の要素にのみ作用します

Question

私は配列を持っていて、その配列の中で選択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> 

私が間違っているかを調べるように見えることはできません。

Answer 1

は、クラス名の代わりに、IDによってSELECT2の初期化を試してみてください。要素IDは、DOM全体で一意である必要があります。

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

そして、最初の$("#grades").select2();