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

问题描述

这是我的HTML：

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

通过 $动态填充它。ajax（） $ b

我需要创建一个将val放入 sessionStorage 中的 文本 / code>作为对象引用。如何实现这一点？

它将如何通过 index ？

来迭代

My try：

  document.getElementsByClassName（'next'）[0] .addEventListener（'click '，function（）{
 sessionStorage.setItem（option.value，option.innerText）; 
}）; 
  

.addEventListener（）所有。 。 。为什么？

另外，我需要在之后加载它。我该怎么做？我是否使用 .trigger（）？

解决方案

var btn = document.querySelector（。next）; var test = document.querySelector（。test）; btn.addEventListener（click，function（）{//获取对选项选项的引用var options = document.querySelectorAll（option）; //循环选项并将值和文本存储在sessionStorage：for（var i = 0; i< options.length; ++ i）{sessionStorage.setItem（options [i] .getAttribute（value），options [i] .textContent ）;}}）; test.addEventListener（click，function（）{//现在，只是为了展示如何从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>  

这段代码不会工作，堆栈溢出代码片段环境，但您可以看到它的工作原理。

This is my HTML:

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

It is being dynamically populated via $.ajax()

I need to make a function that will place "val" in key and Text in "value" in the sessionStorage, as the object reference. How can I achieve this?

How would it be iterated via index?

My try:

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

.addEventListener() is not firing at all . . . why?

Also, I need it loaded afterwards. How do I do it? Do I use .trigger()?

解决方案

Just like this:

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>

This code won't work, here in the Stack Overflow snippet environment, but you can see it work here.

这篇关于如何将选项标签存储在sessionStorage中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！