ajax - 使用下拉框和 jquery 更改多个隐藏输入值

Question

嘿，我在这个问题上遇到了一些麻烦，我什至不知道从哪里开始。我使用 Foxycart 为我的女朋友构建一个电子商务网站，因此向“购物车”发送值仅限于 Foxycart 正在寻找的输入名称。IE;名称、价格、product_sku。

我有一个小型 CMS 后端，允许您添加不同的尺寸、这些尺寸的 sku 以及该尺寸的不同价格。

因此，由于我使用的是 Foxycart，因此我需要隐藏输入来将值发送到购物车。

<input type="hidden" name="name" value="Test" />
<input type="hidden" id="price" name="price" value="19.99" />
<input type="hidden" id="product_sku" name="product_sku" value="sku3445" />
<input type="hidden" id="product_id" name="product_id" value="123" />

这个效果很好。将名称、价格和 SKU 发送到购物车。

我制作了一个下拉框，列出了与该产品相关的不同尺寸/价格。我已将其设置为选择不同的尺寸会改变价格:

<select id="single" name="options" />
<option name="option_price" value="19.99">Default - $19.99</option>
<option name="option_price" value="18.99">Test Size: 18.99</option>
</select>

function displayVals() {
var singleValues = $("#single").val();
("#item_price").html(singleValues);
$("#price").val(singleValues);
}
$("select").change(displayVals);
displayVals();

这也有效，将选定的价格发送到 div 和隐藏的价格输入(以便您可以看到新的购买价格)和购物车(以便购物车显示您想要购买的产品的价格)

现在问题是:如何进行设置，以便选择不同的尺寸/价格将更改隐藏的输入，以便 Product_sku 和尺寸名称随价格一起更新？

我想我必须使用一些 Jquery.ajax() 调用，但不知道......

这行得通吗？:

Jquery:

$(document).ready(function(){
    $("form#get_stuff").change(function() {
    var product_id= $('#product_id').attr('value');

        $.ajax({
            type: "POST",
            url: get_stuff.php,
            data: "product_id="+product_id,
            success: function(data){
$('#product_inputs').html(data);    
            }
        });
    return false;
    });
});

“数据”是:从 php 页面？

这是我第一次尝试 Jquery ajax，所以我真的不知道。

编辑:

抱歉，我刚刚读完这篇文章，有点令人困惑......这是我试图完成的工作流程:

页面加载:使用php，回显产品名称、价格、sku。 (这是默认的)

下拉框更改:使用jquery，根据product_id和从下拉框中选择的大小动态更改隐藏输入的新​​信息(根据选择菜单中一个值的值更新4个隐藏输入)

Answer 1

您还可以在页面加载时加载 SKU 和产品 ID，并将它们作为数据添加到选项标记上，而不是在选择框更改时使用 AJAX。一种方法是将它们添加为类，如下所示:

<select id="single" name="options">
    <option name="option_price" class="sku3445 id123" value="19.99">Default - $19.99</option>
    <option name="option_price" class="sku3554 id321" value="18.99">Test Size: 18.99</option>
</select>

然后使用一点正则表达式，您可以从 change() 函数中的选定选项中提取这些值，并相应地更新隐藏的输入:

function displayVals() {
    var $single = $('#single'),
        singleValues = $single.val(),
        singleClasses = $single.find('option:selected').attr('class'),
        singleSKU = singleClasses.match(/\bsku\d+\b/)[0],
        singleID = singleClasses.match(/\bid\d+\b/)[0].replace('id','');

    $("#item_price").html(singleValues);
    $("#price").val(singleValues);
    $('#product_sku').val(singleSKU);
    $('#product_id').val(singleID);
}
$("select").change(displayVals);
displayVals();

Here is a working example →