Question

17

How to use LocalStorage on last HTML select value

rated 0 times [ 20] [ 3] / answers: 1 / hits: 8024 / 10 Years ago, wed, may 28, 2014, 12:00:00

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.net/5yJNL/1/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayaw

Add To Favorites

Follow

Total Points: 749

Total Questions: 88

Total Answers: 86

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

tayaw questions

1 How to enable cache for getServerSideProps?

Thu, Mar 3, 22, 00:00, 2 Years ago

1 navigator.clipboard.readText() is not working in Firefox

Fri, May 7, 21, 00:00, 3 Years ago

1 Vuetify form .$refs validate is not a function

Wed, Oct 7, 20, 00:00, 4 Years ago

1 Using absolute position to place image above another image using Tailwind CSS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 How to make div tag clickable with Link from react-router-dom?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 10 Years ago ramseydeshaunc · Accepted Answer

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