laravel foreach 选择选项和必需答案

【问题标题】：laravel foreach select option and requiredlaravel foreach 选择选项和必需
【发布时间】：2020-10-01 09:41:16
【问题描述】：

现在我做 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 = "";
                } 

                }

【问题讨论】：

标签： javascript laravel required select-options

【解决方案1】：

当您在 Blade 中执行 foreach 时，您应该为以后要使用 JavaScript 选择的每个输入或元素生成唯一的 ID。现在您已经生成了 N 个 id="status" 的输入，因此您的 JavaScript 代码将只选择第一个。

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

【讨论】：

如果我改为调用一个类，我必须在这里更改什么？ var status = document.getElementById("status");
var statuses = document.getElementsByClassName("status");这将返回元素数组。然后你必须使用 JavaScript 循环遍历它并检查每个元素的条件。

【解决方案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 = "";
  } 
}

【讨论】：