laravel foreach select 选项和必需的

Question

现在我执行 foreach select 选项并执行所需的但是当我 foreach 时它只需要顶部选项，其余的拒绝要求。我如何要求每个选项？

blade:

              @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 = "";
                } 

                }

Answer 1

当您在 blade 中执行 foreach 时，您应该为每个您想要 select 稍后使用 JavaScript 的输入或元素生成唯一的 ID。现在你的情况是你已经生成了 N 个带有 id="status" 的输入，所以你的 JavaScript 代码将 select 只有第一个。

您可以在您的元素中添加一些虚拟 class 而不是唯一 ID，然后 select 使用 JS 所有包含该 class 的元素并循环遍历它们以检查是否满足要求。

Answer 2

试试这个

<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 = "";
  } 
}

laravel foreach select 选项和必需的

laravel foreach select option and required

javascript

laravel

required

select-options