0

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

                }
4

2 回答 2

0

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

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

于 2020-10-01T09:49:37.410 回答
0

尝试这个

<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 = "";
  } 
}
于 2020-10-01T10:18:17.457 回答