Question

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

我有一个很小的CMS后端，允许您添加不同的尺寸，尺寸和尺寸的不同尺寸。

所以，由于我正在使用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并隐藏价格输入（这样您可以看到新的购买价格）和购物车（因此购物车显示您要购买的产品的价格）< / p>

现在问题是：如何设置此选项以便选择不同的尺寸/价格将更改隐藏的输入，以便更新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，echo产品名称，价格，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>

然后使用一点RegEx，您可以从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 →

Answer 2

使用Ajax是可行的方法。当下拉值更改时，您将需要触发对PHP方法的Ajax调用，我假设它将使用下拉值作为参数查询后端数据库以获取必要信息，然后返回该信息以填充隐藏文件。所有这些步骤都应该在您的Ajax调用中发生。

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

2 个答案: