保留在HTML select标签中选择的值

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());
    });
});