使用下拉框和 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 →

Answer 2

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