使用下拉框和jQuery改变多个隐藏的输入值

嗨，我遇到了这个问题的一些麻烦，我甚至不知道从哪里开始。我正在为我的女朋友建立的电子商务网站使用foxycart，因此将值发送到“购物车”仅限于foxycart正在查找的输入名称。 IE IE; IE;名称，价格，product_sku。使用下拉框和jQuery改变多个隐藏的输入值

我有一个很小的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; 
    }); 
});

的'data'是： from the php page？

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

编辑：

对不起，我刚才看了这个过来，这有点混乱.... 这里是工作流程我试图做到：

页负荷：使用PHP，回声产品名称，价格，sku。（这是默认设置）

使用jquery的挂箱更改：根据product_id和从下拉框中选择的大小动态更改隐藏的输入（根据值更新4个隐藏输入来自选择菜单中的一个值）

来源

2011-03-13 David

当选择框更改时，您也可以在页面加载时加载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 →

来源

2011-03-13 17:58:09 mVChr

哇！谢谢，我会选择这个选项。我甚至从来没有想过用正则表达式来实现这一点。 – David 2011-03-13 18:01:58