如何将选项标签存储在sessionStorage中? [英] How can I store options tags in 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中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!