Given the following html code:
<body onload="loadSett()">
<form id="settingsForm" name="settingsForm">
<select name="Sound" id="Sound">
<option value="0">Off</option>
<option value="1">On</option>
</select>
<select name="Vibration" id="Vibration">
<option value="0">Off</option>
<option value="1">On</option>
</select>
</form>
</body>
I have the following javascript:
var getSound;
var getVibra;
function loadSett() {
var form = $("#settingsForm");
getSound = localStorage.getItem("sound");
getVibra = localStorage.getItem("vibra");
if(getSound != undefined && getVibra != undefined) {
if(getSound == "1"){
document.getElementById('Sound').options[1].selected = true;
}
if(getVibra == "1"){
document.getElementById('Vibration').options[1].selected = true;
}
} else { alert("Empty"); }
}
Problem: Why the the option of select tag is not selected on load the page according the value stored in localStorage? Thanks in advance
There is nothing wrong with the basics of your code. Maybe check the console output for errors, etc.
Here is a jsbin version of your code that works as expected: http://jsbin.com/uwucib/1/edit