选择 onchange 重新加载页面并保留所选选项

Question

我有这个 https://jsfiddle.net/1zqgeq79/2/

这是我用来在更改选择时刷新页面的 jquery，现在我只需要它在页面加载后保留所选选项。

        $('.ProductDetails select').change(function () {
         location.reload();
       });

因为我有多个项目，所以我知道必须使用 (this)，但我仍在学习 jquery。谢谢您的帮助！

原文由 xohbrittx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您不想在关闭浏览器后永久保留数据，请使用 sessionStorage 而不是 localStorage。

我用以下代码替换了代码：

 var selectedProduct = sessionStorage.getItem("product");
if(selectedProduct != undefined || selectedProduct != null){
    $(".ProductDetails select").first().find(":selected").removeAttr("selected");
  $(".ProductDetails select").find("option").each(function () {
            if ($(this).val() == selectedProduct) {
                $(this).attr("selected", true);
            }
        });
}

$('.ProductDetails select').change(function () {
    sessionStorage.setItem("product", $(".ProductDetails select").first().val());

  location.reload();
});

只需转到： https ://jsfiddle.net/1zqgeq79/3/

我只为第一个下拉菜单做了。

原文由 Prashant Tomar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

重新加载页面时…所有脚本的运行方式与第一次加载时相同。之前的加载不会保存或访问任何内容。

但是，您可以将数据存储在 cookie 或 localStorage 中，并在页面加载时访问它。

尝试类似的东西：

 $(function(){
    // get stored value or make it empty string if not available
    var storedValue = localStorage.getItem('prod-detail') || '';

    $('.ProductDetails select').change(function () {
         // store current value
         var currValue = $(this).val();
         localStorage.setItem('prod-detail', currValue );
         // now reload and all this code runs again
         location.reload();
    })
    // set stored value when page loads
    .val(storedValue)

});

---

更好的解决方案可能是使用 ajax 更新存储在服务器上的购物车，并在页面加载时在那里设置所有存储的值

原文由 charlietfl 发布，翻译遵循 CC BY-SA 3.0 许可协议