laravel foreach选择选项和必需

问题描述

现在，我做foreach选择选项并执行必需的操作，但是当我做foreach仅需要顶部选项时，其余的则拒绝。如何查询每个选项？

刀片：

              @foreach($student as $index => $students)

               <input type="hidden" class="form-control" name="student_id[]" value="{{$students->student_id}}">
               <input type="hidden" class="form-control" name="member_id" value="{{CurrentUser::user()->member_id}}">

               <select name="status[]" class="form-control" style="width:70%;" id="status" required>
                <option disabled selected value="" >
                 Choose...
                </option>
                <option name="status[]" value="Present">Present</option>
                <option name="status[]" value="Absent">Absent</option>
                <option name="status[]" value="Tardy">Tardy</option>
               </select><br>
                <p style="color:#D30707;font-size:5px;" id="check_status"></p>

              @endforeach

js：

              function myFunction() {

               var status = document.getElementById("status");

                if (!status.checkValidity()) {
                 document.getElementById("check_status").innerHTML = "Please choose status field.";
                } else {
                 document.getElementById("check_status").innerHTML = "";
                } 

                } 

解决方法

在刀片中进行foreach操作时，应该为以后要使用JavaScript选择的每个输入或元素生成唯一的ID。现在您遇到的情况是，您已经生成了N个id为“ status”的输入，因此您的JavaScript代码将仅选择第一个。

您可以代替唯一的id向您的元素中添加一些虚拟类，然后使用JS选择包含该类的所有元素并循环通过它们以检查是否满足要求。

,

尝试

<select name="status[]" class="form-control" style="width:70%;" id="status" onchange="myFunction()" multiple required>
  <option disabled selected value="" >
  Choose...
  </option>
  <option name="status[]" value="Present">Present</option>
  <option name="status[]" value="Absent">Absent</option>
  <option name="status[]" value="Tardy">Tardy</option>
</select>
<br>
<p style="color:#D30707;font-size:5px;" id="check_status"></p>

在js

function myFunction() {

  var status = document.getElementById("status");
  var selectedValues = Array.from(status.selectedOptions).map(option => option.value);
  if (!selectedValues.includes('Absent')) { // change here containe value
      document.getElementById("check_status").innerHTML = "Please choose status field.";
  } else {
      document.getElementById("check_status").innerHTML = "";
  } 
}