Selection list into localstorage but, values are not 0 through x??? 1

[cbsarge]

I have a selection list that is populated by a bunch of items. Each item has a unique ID number that is stored in the value part of the option. I want users to be able to return to the page and using localstorage have the selections made on previous visits be what they see. For one list which is just a numbered list it works great! For the second list whose values are all distinct numbers it;'s not working.

This works great

<input type="button" class="btnFJ" value="Energy" onclick="ACTIONS.use_consumable(EnergyCons,localStorage.getItem('FJsconsumables'))">
<form style="display: inline">
<SELECT class="FJselect" name="numberconsumables" style="width: 54px" id="FJsconsumables">
<OPTION class="FJoptionBG1" value="">---</OPTION>
<OPTION class="FJoptionBG1" value="1">1</OPTION>
<OPTION class="FJoptionBG2" value="2">2</OPTION>
<OPTION class="FJoptionBG1" value="3">3</OPTION>
<OPTION class="FJoptionBG2" value="4">4</OPTION>
<OPTION class="FJoptionBG1" value="5">5</OPTION>
</SELECT>
</form>

document.getElementById("FJsconsumables").onchange = function() {
localStorage.setItem('FJsconsumables', document.getElementById("FJsconsumables").value);
}
if (localStorage.getItem('FJsconsumables')) {
document.getElementById("FJsconsumables").options[localStorage.getItem('FJsconsumables')].selected = true;
}

This doesn't What it does instead is store the 3rd item as 4 since it's the 4th item in the list. I need to store the value of the 3rd item and be able to recall it and set the selection list to that item when a user returns.

<form style="display: inline">
<SELECT class="FJselect" name="energytype" style="width: 110px" id="FJsenergytype">
<option value="">-Energy</option>
<OPTION class="FJoptionBG1b" value="1">Energy Drink - 10</OPTION>
<OPTION class="FJoptionBG1b" value="5">Energy Infusion - 20</OPTION>
<OPTION class="FJoptionBG1b" value="9">Atomic Energizer - 30</OPTION>
<OPTION class="FJoptionBG1b" value="11">Nucleic Reaction - 50</OPTION>
<OPTION selected class="FJoptionBG1b" value="609">NUCLEIC ENERGY - 50</OPTION>
<OPTION class="FJoptionBG1b" value="234">Red Line - 55</OPTION>
</SELECT>
</form>

document.getElementById("FJsenergytype").onchange = function() {
localStorage.setItem('FJsenergytype', document.getElementById("FJsenergytype").value);
}
if (localStorage.getItem('FJsenergytype')) {
document.getElementById("FJsenergytype").options[localStorage.getItem('FJsenergytype')].selected = true;
}

 

[jpadie]

you are equating the value of an option with its index. which is unlikely always to be the same

instead why not just set the value of the select element?

if (localStorage.getItem('FJsenergytype')) {
document.getElementById("FJsenergytype").value = localStorage.getItem('FJsenergytype')
}

 

[cbsarge]

THANK YOU!!!

I always over-complicate things....

Your solution works perfectly!

 

[jpadie]

of course you can do it your way too

if (localStorage.getItem('FJsenergytype')) {
 var elems = document.getElementByID("FJsenergytype").options;
 var val = localStorage.getItem('FJsenergytype');
 for (var i = 0; i < elems.length; i++){
  elems[i].selected =  val == elems[i].value ? true : false; 
 } 
}