Question

在我的购物车中，我添加了我的产品，存储在会话中。

我想在刷新页面时从所有下拉列表中存储我选择的选项。

我需要刷新我的页面，以便我的会话可以更新，这样我就可以在我的数据库中发布所有更新的值。有什么不对......

如果我为我的产品的第一行选择一个选项，它会保存在本地存储中。但是当我从其他行中选择另一个产品选项时，它会覆盖本地存储，因此我的本地存储只保存一个选项，当从其他产品中选择其他选项时，它会在本地存储中重写我唯一的一个保存选项。我必须保存多个选项。

没有刷新会发生什么......

我可以说我在我的画廊中选择了1个垫子。

因此，在我的购物车中，这个垫子将是1个产品，如果我通过单击加号按钮再添加两个，然后单击确认订单，它将在我的DB中发布值为1.

但不是3。所以我的页面需要刷新，所以我需要保存所有下拉选择，这样我才能刷新页面。

到目前为止，我试图保存它，但它保存了我购物车的第一行。这就是我试过的......

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

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

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

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

这是我的foreach loop，如果需要更好地理解它。

下面这个脚本对于这个问题并不重要，但是它显示了我如何处理我的下拉列表以根据使用数据属性的下拉选择来获取ajax值。

script that gets cost and subtotal

Answer 1

好的......花了很长时间，但你会喜欢我的解决方案（我想）。

我们必须逐行设置存储...
因此，必须在产品行上执行.each()循环我们使用index的{{1}}作为存储名称的一部分，以确保不会覆盖。

鉴于我为此示例制作的HTML：

.each()

这是脚本：

<div class="row">
    <!-- other elements like img etc... -->

    <select class="fabric">
        <option>jeans</option>
        <option>leather</option>
        <option>cotton</option>
    </select>

    <select class="size">
        <option>small</option>
        <option>medium</option>
        <option>large</option>
    </select>

</div>

<div class="row">
    <!-- other elements like img etc... -->

    <select class="fabric">
        <option>jeans</option>
        <option>leather</option>
        <option>cotton</option>
    </select>

    <select class="size">
        <option>small</option>
        <option>medium</option>
        <option>large</option>
    </select>

</div>

在this CodePen!上试试 （更改选择并点击＆＃34;运行＆＃34;刷新）

如何从本地存储中的php foreach循环中保存所有下拉列值？

1 个答案: