刷新后保留所选选项（表单/选择）[重复]答案

【问题标题】：Keep selected option (form/select) after refresh [duplicate]刷新后保留所选选项（表单/选择）[重复]
【发布时间】：2021-11-23 15:13:28
【问题描述】：

可能重复：
Html select option lost data after submit

我有一个选择菜单，应该在页面刷新后保留所选选项。这是一个例子：

<select id="form_frame" name="frame" onchange="getData(this);"/>
   <option value="data1" selected="selected">Data 1</option>
   <option value="data2">Data 2</option>
</select>

函数 getData 只是将信息拉给用户。

我正在使用 Smarty/php 作为动态内容。

欢迎咨询，谢谢！

【问题讨论】：

您可以考虑使用 cookie 或 localStorage。
本地存储（如果 IE8 之前的浏览器不是问题），如果是 cookie。
一个 localStorage 使用示例？
whatwg.org/specs/web-apps/current-work/#storage

标签： php javascript jquery smarty

【解决方案1】：

如何使用本地存储：

$(function() {
    if (localStorage.getItem('form_frame')) {
        $("#form_frame option").eq(localStorage.getItem('form_frame')).prop('selected', true);
    }

    $("#form_frame").on('change', function() {
        localStorage.setItem('form_frame', $('option:selected', this).index());
    });
});

FIDDLE

【讨论】：

我的朋友这个选项适用于菜单，但是使用 getData onchange 函数拉取的内容，刷新后不会更新
不，它没有，但我不可能知道该函数的作用、返回或插入功能？
这是一个显示和隐藏一些对象的javascript函数：例如document.getElementById('data1').style.display = 'block';
我猜你想通了，但你基本上必须存储一些值，可能只是 0 或 1，并在页面加载时检查 localstorage 中是否存在该值，然后设置可见性基于此阻止或不阻止。
我在第一行添加第二行 if with: jQuery("#form_frame option").change();这会在必要时触发 onchange 事件。谢谢！

【解决方案2】：

将所选选项元素的id或值放入你的php会话中（$_SESSION['selected_option_id']），这样这个值就可以通过所有页面传递。然后更改生成选项元素的代码，再次检查$_SESSION['selected_option_id']，如果匹配，则在选项元素中设置 selected 属性。

会话是在请求之间共享值的好方法，因为 HTTP 是无状态协议。

我更喜欢在 localStorage 和 cookie 之前使用 session，因为这些可能在客户端浏览器中不可用或未启用。 session 是 apache/php 的一个特性，在服务器端得到支持。

PHP Session Handling

【讨论】：

【解决方案3】：

您可以使用 Cookie。但是，如果您希望它适用于不接受来自您网站的 cookie 的用户，请在 url 中附加一个井号标签。选择字段的 Onchange 您更新井号标签。在页面加载时，您检查当前的井号标签并将选择设置为其值与井号标签之一匹配的选项。

【讨论】：