Question

可能重复：
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作为动态内容。

欢迎提出建议，谢谢！

Answer 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

Answer 2

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

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

我更喜欢localStorage和cookies之前的会话，因为这些会话可能在客户端浏览器中不可用或未启用。会话是apache / php的一个功能，在服务器端支持。

PHP Session Handling

Answer 3

您可以使用Cookie。但是，如果您希望它为不接受您网站的Cookie的用户使用，请使用哈希标记附加网址。更改选择字段后，您将更新哈希标记。在页面加载时，检查当前的哈希标记，并将select设置为其值与hash-tag的值匹配的选项。

刷新后保留选定的选项（表单/选择）

3 个答案: