如何在最后的HTML选择值上使用LocalStorage [英] How to use LocalStorage on last HTML select value

问题描述

如何使用JavaScript设置/检索选择下拉菜单的最后选定值？我试图在选择下拉菜单上创建一个onchange函数，该选项设置选定的选项，然后在每个页面加载中加载该值。

How can I set/retrieve the last selected value of a select drop-down with JavaScript? I'm trying to create an onchange function on a select drop-down that that sets the selected option, and then on each page-load, that valued is loaded.

这里是HTML

<select class="testSelect">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
    <option value="test2">test3</option>
    <option value="test2">test4</option>
</select>

我在JavaSCript方面遇到了一些麻烦。

I'm having a little trouble with the JavaSCript though.

var select = document.querySelector(".testSelect");
var selectOption = select.options[select.selectedIndex];
var getLast = localStorage.getItem(select, lastSelected);
selectOption = getLast;


select.onchange = function () {
   var lastSelected = select.options[select.selectedIndex].value;
   localStorage.setItem(select, lastSelected);
 }

以下是一个小提琴 http://jsfiddle.net/5yJNL/1/

推荐答案

您HTML中的值错误

The values in your HTML were wrong

<select class="testSelect">
    <option value="test1">test1</option>
    <option value="test2">test2</option>
    <option value="test3">test3</option>
    <option value="test4">test4</option>
</select>    

Javascript

Javascript

var select = document.querySelector(".testSelect");
var selectOption = select.options[select.selectedIndex];
var lastSelected = localStorage.getItem('select');

if(lastSelected) {
    select.value = lastSelected; 
}

select.onchange = function () {
   lastSelected = select.options[select.selectedIndex].value;
   console.log(lastSelected);
   localStorage.setItem('select', lastSelected);
}

http://jsfiddle.net/2MPPz/1/

这篇关于如何在最后的HTML选择值上使用LocalStorage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！