我的Javascript似乎只适用于我的Laravel foreach循环中的第一个条目

我有一个foreach循环在Laravel中运行，其中有一个下拉列表。该下拉列表用于通知人们某项调查的状态（已发送、未发送、已接收等）。其思想是某项调查的状态只存储在本地。因此，即使在页面刷新之后，状态也会被记住

@foreach($surveys as $sur)
   <tr>
      <td style="padding:5px 25px 0 0;">{{$sur->titel}}</td>
      <td style="padding:5px 25px 0 0;">
         <select id="myDynamicSelectBox">
            <option>None</option>
            <option>Not send</option>
            <option>Sent</option>
            <option>Answer received</option>
         </select>
      </td>
@endforeach

@foreach（$sur）
{{$sur->titel}
没有一个
不发送
发送
收到的答复
@endforeach

我的JavaScript如下所示：

const mySel = document.getElementById("myDynamicSelectBox");
mySel.addEventListener("change",function() {
  localStorage.setItem("selValue",this.value); // save it
});
let val = localStorage.getItem("selValue");
if (val) mySel.value=val; // set the dropdown
// trigger the change in case there are other events on the select
mySel.onchange(); 
</script>

const mySel=document.getElementById（“myDynamicSelectBox”）；
addEventListener（“change”，function（））{
localStorage.setItem（“selValue”，this.value）；//保存它
});
让val=localStorage.getItem（“selValue”）；
如果（val）mySel.value=val；//设置下拉列表
//如果select上存在其他事件，则触发更改
mySel.onchange（）；

所以我面临的问题是，它确实保存了foreach循环中第一次调查的状态。但由于某些原因，其他调查无法得出这些值。有什么想法吗

谢谢你抽出时间

---

干杯，

问题是您有许多

选择的
具有相同的
ID
。Javascript在文档中查找第一个匹配元素，该元素具有必要的
ID
，并停止搜索。为此，您应该使用
class
属性，并使用
document.querySelector（'select.someClassNameHere'）
查找元素，以获得所需的所有下拉列表。
您需要为所选元素的每个ID指定一个唯一的值。我建议您使用测量对象的ID，如下所示：

@foreach($surveys as $sur)
<tr>
   <td style="padding:5px 25px 0 0;">{{$sur->titel}}</td>
   <td style="padding:5px 25px 0 0;">
      <select onChange="doStuff({{$sur->id}})" id="myDynamicSelectBox{{$sur->id}}">
         <option>None</option>
         <option>Not send</option>
         <option>Sent</option>
         <option>Answer received</option>
      </select>
   </td>
@endforeach

function loadData(){
    let data = localStorage.getItem("selectedValues");
    if(data){
        let stored = JSON.parse(data);
        // get property names from stored.
        // loop over them and get the select elements by id given by the keys
        // assign values
        // other logic...
    }
}

这就是保存数据的方式，现在要加载数据，您需要编写从存储对象中获取属性的内容。你可以在这里找到。搜索从对象获取属性。然后循环该列表，并进行所需的DOM更改

function loadData(){
    let data = localStorage.getItem("selectedValues");
    if(data){
        let stored = JSON.parse(data);
        // get property names from stored.
        // loop over them and get the select elements by id given by the keys
        // assign values
        // other logic...
    }
}

id=“myDynamicSelectBox”id对于每个选择器都应该是唯一的。。我应该将id更改为类似类的其他内容吗？因此我将
select
中的
id=“myDynamicSelectBox”
更改为
class=“myDynamicSelectBox”
以及脚本
document.getElementById（“myDynamicSelectBox”）
到
document.querySelector（'select.myDynamicSelectBox'）但这似乎不起作用。仍然只能保存我的foreach循环中的第一个条目。在代码中，在运行
document.querySelector（'select.myDynamicSelectBox'）之后，您有一个元素数组。接下来你要做的是循环遍历元素数组，并将eventListener附加到每个元素。我感谢你的帮助，但我真的不知道该怎么做。它与你在任务中提供的代码没有太大区别。从
let items=document.querySelector（'select.myDynamicSelectBox'）开始；对于（让我输入items）{items[i]。addEventListener（'change'，function（）{}）；}…
，不要害怕用它做实验。@RodionBaskakov
document.querySelector
返回单个元素，而不是数组
document.querySelectorAll
返回一个包含所有匹配元素的数组。谢谢您的时间，但我真的不知道该如何将其转换为我的js。。