如何從 sessionStorage 中檢索多個選擇值並將它們放入原始表單字段中

Question

我想使用 select multiple 來存儲具有標簽輸入功能的表單輸入字段中的值，並在發送表單后自動檢索它們。 基本上，我想要實現的是在表單提交后將它們保留在輸入字段中。 由於它們是標簽，這為用戶增加了便利，因為您只需添加/刪除一些輸入並重新加載頁面。

我已經成功編寫了一段代碼，在單擊提交按鈕后將數組存儲在 sessionStorage 中，其中pmids[]是選擇元素的 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;
        }
    }
  });
}

Answer 1

說到這一行：

document.getElementById("pmids[]" options)

這不是您訪問<select>元素選項的方式。 相反，您應該調用：

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

此外， each都是一個 jQuery 方法。 each的 vanilla JS 等價物是forEach ，實際上，它只適用於數組和節點列表。 因此，您需要先將 options 集合轉換為數組：

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

最后， forEach里面的this是指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;
      }
    }
  });
}