php - 根据选项更改价格

Question

您好，我正在尝试根据从选项中选择的任何内容来更改价格...我不知道是否可以在 ajax 上使用 JavaScript 来执行此操作，请问我该如何操作...

<tr>
<td width="160">Price:</td>
<td name="price"><?php echo $row['Standard_price']; ?></td>
</tr>

价格是从数据库中选择的，作为商品的标准价格，我希望它在有人从下面的选项中选择时更改(不在数据库中)

<tr>
td for="length" width="160">size*:</td>
<td>
<select name="size" class="small">
<option value="£25.00">12 size</option>
<option value="£30.00">14 size(+£30.00)</option>
<option value="£40.00">18 size(+£40.00)</option>
<option value="£45.00">20 size(+£45.00)</option>
<option value="£80.00">28 size(+£80.00)</option
</select>

我选择 18 英寸，即 40 英镑，我希望它能将价格更改为 40 英镑，而且如果我 ech0

$length = $_POST['length'];

它应该告诉我 18 英寸(+40.00 英镑)而不是 40.00 英镑

因为它会在我的购物车上

product name: blue nike shoes
size: 18 inch (+£40.00)
Unit price: £40.00
qty:1
total price: £40.00

单价和尺寸会根据您从选项中选择的内容而变化。请帮忙。我的其他所有东西都在工作，但它只是让价格根据选项而改变，并且还得到你从选项中选择的尺寸。

如果没有人仍然理解我... 尝试从任何销售网站购买鞋子并选择您的尺码……虽然所有尺码的价格都相同，但在购物车中它会告诉您要选择。 在我的例子中，尺寸有不同的价格，我希望它在购物车上显示您选择的尺寸以及该尺寸的价格。

也许我这样做的方式是错误的，但我知道这是可能的，因为我在一些销售不同长度或形状的商品的网站上看到它的价格彼此不同。

Answer 1

编辑

带有additionnal 字段的版本:JSFiddle

具有原始 字段的版本:JSFiddle

---

带有附加字段

我添加了一行以单独查看项目大小:

HTML 附加组件

<tr>
  <td width="160">Item:</td>
  <td id="item">12 inch</td>
</tr>

Javascript

function addCharge(select, elemIndex)
{
  var item = select.getElementsByTagName('option')[elemIndex];
  var price = document.getElementById('pricetag');
  var finalPrice = "";

  /* Getting the price and showing it up */
  finalPrice = parseFloat(item.text.substring(11, item.text.length-1));

  /* We set a default £25.00 value */
  if(isNaN(finalPrice)) finalPrice = "25";

  /* we add decimal */
  price.innerHTML="£"+finalPrice+".00";

  /* Getting the size and showing it up */
  var size = item.text.substring(0,7);
  var sizeDOM = document.getElementById('item');
  sizeDOM.innerHTML = size;
}

---

带有原始字段

Javascript

function addCharge(select, elemIndex)
{
  var item = select.getElementsByTagName('option')[elemIndex];
  var price = document.getElementById('pricetag');
  var finalPrice = "";

  /* Getting the price and showing it up */
  finalPrice = parseFloat(item.text.substring(11, item.text.length-1));

  /* We set a default £25.00 value */
  if(isNaN(finalPrice)) finalPrice = "25";

  /* we add decimal */
  price.innerHTML="£"+finalPrice+".00";

  /* Getting the size and showing it up */
  var size = " ("+item.text.substring(0,7)+")";
  price.innerHTML += size;

---

新:带有输入字段

新的 HTML

<input type="hidden" id="itemPrice" name="itemPrice"/>
<input type="hidden" id="itemLength" name="itemLength"/>

新的 JavaScript

var itemPriceDOM = document.getElementById('itemPrice');
var itemLengthDOM = document.getElementById('itemLength');

/* we add decimal */
itemPriceDOM.value = finalPrice;

/* Getting the size and showing it up */
var size = item.text.substring(0,7);
itemLengthDOM.value = size;
price.innerHTML += " ("+size+")";

查看新JSFiddle !