如何将选项标签存储在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()动态填充的

我需要创建一个函数，该函数将在sessionStorage key放置"val"在key并将Text放置在“ 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片段环境中不起作用，但是您可以在此处看到它的作用。