html - 保留在 HTML 选择标记中选择的值

Question

我正在为客户创造一种在订单之上给小费的方式。但是，当您“更新”总数时，选择值将始终回到 $0。有没有办法保留该值，以便即使刷新页面，也会显示用户选择的提示？

我知道 select 标签有一个“selected”属性，但我不确定如何让它为我工作。

Answer 1

在提示选择菜单的更改事件上，您可以设置 cookie 或使用本地存储并以这种方式保存值。然后在 DOM 准备就绪时，只需读取 cookie 或本地存储值并更新选择菜单。

如果您不关心 http 流量，您还可以在同一更改事件处理程序上对您的服务器进行 ajax 调用并设置会话变量。然后，当您输出 HTML 时，selected可以将该属性应用于与会话 var 匹配的选项。

未经测试，但这样的事情应该可以工作：

$(function(){
    var savedTip = localStorage.getItem('tipVal');
    if (savedTip) {
        $('#tip').val(savedTip);
        localStorage.removeItem('tipVal'); // garbage collection
    }

    $('#tip').on('change', function(e) {
        localStorage.setItem('tipVal', $(this).val());
    });
});