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

Question

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

@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

我的 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>

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

感谢您的宝贵时间，

干杯，

Answer 1

问题是你有很多select 和相同的ID。 Javascript 在文档中查找具有必要ID 的第一个匹配元素并停止搜索。为此，您应该使用class 属性并查找带有document.querySelector('select.someClassNameHere') 的元素以获得您需要的所有下拉列表。

Answer 2

您需要为选择元素的每个 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

然后您处理每个调查 id 的每个事件的更改，因为您在 HTML 部分中添加了侦听器，因此您不再需要在脚本中添加它。你只需要编写函数本身，并让它接受你正在使用的id。

function doStuff(id){
     let selector = "myDynamicSelectBox"+id;
     let mySel = document.getElementById(selector);
     let stored = localStorage.getItem("selectedValues");
     let data;
     if(store){
         data = JSON.parse(stored);
     } else {
         data = {};
     }
     data[selector] = mySel.value; //or mySel.options[mySel.selectedIndex].value if using a real select element...
     localStorage.setItem("selectedValues", JSON.stringify(data));
}

这就是您保存数据的方式，现在要加载数据，您需要编写一些东西来从存储的对象中获取属性。你可以在 SO 上找到它。搜索从对象获取属性。然后循环遍历该列表，并进行所需的 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...
    }
}