在页面刷新时恢复下拉选择的选项？答案

【问题标题】：Restore dropdown selected option on page refresh?在页面刷新时恢复下拉选择的选项？
【发布时间】：2012-07-10 12:14:58
【问题描述】：

我有这样的表格，

<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>

当我第一次拉页面时，选择了选项 D。如果我从下拉列表中选择选项 A，然后进行页面刷新，我希望下拉选项返回 D。在页面刷新时，我希望所有内容恢复到初始状态。但下拉菜单显示选项 A，或之前选择的任何内容。

知道如何在页面刷新时使页面显示选项 D 吗？

谢谢。

【问题讨论】：

你在 Firefox 中刷新了吗？它是我用过的唯一一个在页面刷新时保持表单数据的浏览器。 stackoverflow.com/questions/1479233/…
您是否在文档就绪处理程序（或在您选择后出现的脚本块）中尝试过以下操作：$("#alphabets").val("D")

标签： javascript jquery html

【解决方案1】：

将以下内容放在页面上的脚本标记中。

 $(function(){
      $('#alphabets option[value="D"]').attr('selected', true);
 });

【讨论】：

把它放在 $(window).on('load', function() {});帮助了我。

【解决方案2】：

$(document).ready(function() {
    $("#alphabets").val(localStorage.alphabets);
});

$("#alphabets").change(function() {
    localStorage.alphabets = $(this).val();
});

我认为这会起作用（仅在支持localStorage 的浏览器中）但我还没有测试过。

【讨论】：

【解决方案3】：

这是 Firefox 记住选择列表上的选择的“功能”。

将autocomplete="off" 添加到<select> 标记中。

【讨论】：