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.

Here is the 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>

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);
 }

and here's a fiddle /

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.

Here is the 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>

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);
 }

and here's a fiddle http://jsfiddle/5yJNL/1/

• javascript
• html

Share Improve this question Follow asked May 28, 2014 at 7:31 user3143218user3143218 1,81655 gold badges3434 silver badges4848 bronze badges 1

• the first parameter of set & getItem should be a string i.e. 'select' – FuzzyTree Commented May 28, 2014 at 7:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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/2MPPz/1/

You have at least two problems in your code.

1. The first one is an scope problem: The lastSelected variable is local defined in your function. You must define as global variable.

2. The second one is that the first parameter of setItem & getItem methods should be a String

So your corrected code looks like:

var lastSelected;

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


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