如何在 sessionStorage 中存储选项标签？

Question

这是我的 HTML:

<select>
   <option value="val1">Text1</option>
   <option value="val2">Text2</option>
   <option value="val3">Text3</option>
   <option value="val4">Text4</option>
</select>

它正在通过 $.ajax()

动态填充

我需要创建一个函数，将 "val" 放在 key 中，将 Text 放在 sessionStorage 的“value”中作为对象参考。我怎样才能做到这一点？

如何通过index进行迭代？

我的尝试：

document.getElementsByClassName('next')[0].addEventListener('click', function() {
    sessionStorage.setItem(option.value, option.innerText);
});

.addEventListener() 根本没有开火。 . .为什么？

此外，我需要在之后加载它。我该怎么做？我使用 .trigger() 吗？

Answer 1

就像这样：

var btn = document.querySelector(".next");
var test = document.querySelector(".test");

btn.addEventListener("click", function(){
  // Get a reference to the select's options
  var options = document.querySelectorAll("option");

  // Loop through the options and store the value and text in sessionStorage:
  for(var i = 0; i < options.length; ++i){
    sessionStorage.setItem(options[i].getAttribute("value"), options[i].textContent);
  }
});

test.addEventListener("click", function(){

  // Now, just to show how to get the values out of sessionStorage:
  for (var i = 0; i < sessionStorage.length; i++){
    alert(sessionStorage.getItem(sessionStorage.key(i)));
  }

});

<select>
   <option value="val1">Text1</option>
   <option value="val2">Text2</option>
   <option value="val3">Text3</option>
   <option value="val4">Text4</option>
</select>
<button class="next">Next</button>

<button class="test">Test</button>

此代码在 Stack Overflow 代码段环境中不起作用，但您可以看到它起作用 here。

如何在 sessionStorage 中存储选项标签？

How can I store options tags in sessionStorage?

html

javascript

ajax

jquery

session-storage