使用下拉框和jquery更改多个隐藏输入值
嘿，我在这个问题上遇到了一些麻烦，我甚至不知道从哪里开始。我正在使用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个隐藏输入)
回答 2
Stack Overflow用户
发布于 2011-03-14 01: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();Stack Overflow用户
发布于 2011-03-14 01:44:41
使用Ajax是可行的方法。当DropDown值发生变化时，您将希望触发对PHP方法的Ajax调用，我假设该方法将使用DropDown值作为参数查询后端数据库以获取必要的信息，然后返回该信息以填充隐藏的文件。所有这些步骤都应该在Ajax调用中执行。
https://stackoverflow.com/questions/5291026
复制相似问题
腾讯云开发者
