I have a form like this,
<html>
<body>
<form>
<select name="alphabets" id="alphabets">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D" selected="selected">D</option>
</select>
</form>
</body>
</html>
When I pull the page the first time, option D is selected. If I select option A from the dropdown, and then do a page refresh, I want the dropdown option to go back to D. On page refresh, I want everything to go back to it's initial state. But the dropdown displays option A, or whatever was previously selected.
Any idea how can I make the page display option D on page refresh?
Thanks.
I have a form like this,
<html>
<body>
<form>
<select name="alphabets" id="alphabets">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D" selected="selected">D</option>
</select>
</form>
</body>
</html>
When I pull the page the first time, option D is selected. If I select option A from the dropdown, and then do a page refresh, I want the dropdown option to go back to D. On page refresh, I want everything to go back to it's initial state. But the dropdown displays option A, or whatever was previously selected.
Any idea how can I make the page display option D on page refresh?
Thanks.
Share Improve this question asked Jul 10, 2012 at 22:49 user471317user471317 1,2312 gold badges22 silver badges35 bronze badges 2- 1 Are you refreshing in Firefox? It is the only browser I've ever worked in that kept form data on page refresh. stackoverflow./questions/1479233/… – TheZ Commented Jul 10, 2012 at 22:55
-
Have you tried the following in a document ready handler (or in a script block that appears after your select):
$("#alphabets").val("D")– nnnnnn Commented Jul 10, 2012 at 22:56
3 Answers
Reset to default 5Place the following in a script tag on your page.
$(function(){
$('#alphabets option[value="D"]').attr('selected', true);
});
This is a 'feature' with Firefox remembering selection on select lists.
Add autoplete="off" to the <select> tag.
$(document).ready(function() {
$("#alphabets").val(localStorage.alphabets);
});
$("#alphabets").change(function() {
localStorage.alphabets = $(this).val();
});
I think this will work (only in browsers that support localStorage) but I haven't tested it.