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

Stack Overflow用户

提问于 2011-03-13 17:20:30

回答 2查看 2.8K关注 0票数 2

嘿，我在这个问题上遇到了一些麻烦，我甚至不知道从哪里开始。我正在使用foxycart为我的女朋友建立一个电子商务网站，所以向“购物车”发送值仅限于foxycart正在寻找的输入名称。即名称、价格、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，echo产品名称，价格，sku。(这是默认设置)

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

ajax

jquery

云点播特惠1元起

提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-03-13 17:58:10

您还可以在页面加载时加载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();