1

嗨，我正在尝试根据从选项中选择的任何内容来更改价格...我不知道是否在 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 英镑

$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

单价和大小将根据您从选项中选择的内容而变化。请帮忙。我有其他一切工作，但它只是根据选项改变价格，并获得您从选项中选择的尺寸。

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

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

4

2 回答 2

2

编辑

带有附加字段的版本：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！

于 2013-05-30T20:17:25.747 回答
0

你需要实现这样的东西：

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

<select name="title" id="priceDropDown" class="small">
  <option<?php fillSelect('size','','',true); ?> DISABLED value="">Select size</option>
  <option<?php fillSelect('size','12'); ?> value="25">12 size(+£25.00)</option>
  <option<?php fillSelect('size','14'); ?> value="25">14 size(+£30.00)</option>

</select>

<script type="text/javascript">
$(function() {
   $('#priceDropDown').on('change', function() {
          //$('#priceContainer').text($(this).val());
          $('#priceContainer').text($(this).find('option:selected').text());
   });
});
</script>

在这个例子中，我使用的是 jQuery。

于 2013-05-30T16:55:15.950 回答