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

Question

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

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

我需要刷新我的页面，以便可以更新我的会话，以便我可以在我的数据库中发布所有更新的值。 怎么了……

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

如果不刷新会发生什么......

假设我在我的画廊中选择了 1 个靠垫。

所以在我的购物车中，这个垫子将是 1 个产品，如果我通过单击加号按钮再添加两个，然后单击确认订单，它将在我的数据库中发布 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() 循环。
我们使用.each() 的index 作为存储名称的一部分，以确保不会被覆盖。

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

<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>

这是脚本：

$(function() {

    $(".row").each(function(index){

        // Fabric selection
        if (localStorage.getItem('row_'+index+'_fabric')) {
            $(this).find('.fabric option').prop('selected', false).eq(localStorage.getItem('row_'+index+'_fabric')).prop('selected', true);
            console.log("Row#"+index+" get-fabric: "+localStorage.getItem('row_'+index+'_fabric'));
        }

        $(this).find(".fabric").on('change', function() {
            localStorage.setItem('row_'+index+'_fabric', $(this).find('option:selected').index());
            console.log("Row#"+index+" set-fabric: "+$(this).find('option:selected').index());
        });


        // Size selection
        if (localStorage.getItem('row_'+index+'_size')) {
            $(this).find('.size option').prop('selected', false).eq(localStorage.getItem('row_'+index+'_size')).prop('selected', true);
            console.log("Row#"+index+" get-size: "+localStorage.getItem('row_'+index+'_size'));
        }

        $(this).find(".size").on('change', function() {
            localStorage.setItem('row_'+index+'_size', $(this).find('option:selected').index());
            console.log("Row#"+index+" set size: "+$(this).find('option:selected').index());
        });
    });
});

在this CodePen!上试试
（更改选择并点击“运行”以刷新）