时间戳

首页 > 解决方案 > 如何从 sessionStorage 中检索多个选择值并将它们放入原始表单字段中

javascript - 如何从 sessionStorage 中检索多个选择值并将它们放入原始表单字段中

问题描述

我想存储表单输入字段中的值，该字段具有使用选择多个输入功能的标签，并在表单发送后自动检索它们。基本上，我想要实现的只是在提交表单后将它们保留在输入字段中。由于它们是标签，这为用户增加了便利，因为您可以添加/删除一些输入并重新加载页面。

我已经成功编写了一段代码，在单击提交按钮后将数组存储在 sessionStorage 中，其中pmids[]select 元素的 id 是：

function store() {
  var select = document.getElementById('pmids[]');
  var pmids = [...select.options]
                  .filter(option => option.selected)
                  .map(option => option.value);
  sessionStorage.setItem("pmids", JSON.stringify(pmids));
}

我正在努力将值重新放入表单字段，但这种尝试似乎不起作用：

var storedPmids = JSON.parse(sessionStorage.getItem("pmids"));
if (storedPmids !== null) {
  document.getElementById("pmids[]" options).each(function() {
        for (var i = 0; i < storedPmids.length; i++) {
        if (this.value == storedPmids[i]) {
        this.selected = true;
        }
    }
  });
}

标签： javascripthtmllocal-storagesession-storage

解决方案

说到这一行：

document.getElementById("pmids[]" options)

这不是您访问<select>元素选项的方式。相反，您应该调用：

document.getElementById("pmids[]").options

此外，each是一个jQuery方法。与原版 JS 等效的each是 is forEach，事实上，它只适用于数组和节点列表。因此，您需要先将您的选项集合转换为数组：

var options = Array.from(document.getElementById("pmids[]").options);

最后，thisinsideforEach指的是window对象，所以需要使用带参数的回调函数。完整代码：

var storedPmids = JSON.parse(sessionStorage.getItem("pmids"));
if (storedPmids !== null) {
  var options = Array.from(document.getElementById("pmids[]").options);
  options.forEach(function(option) {
    for (var i = 0; i < storedPmids.length; i++) {
      if (option.value == storedPmids[i]) {
        option.selected = true;
      }
    }
  });
}

推荐阅读