根据选项更改价格

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英镑

因为在我的购物车上它将是

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

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

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

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

Answer 1

修改

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

Answer 2

您需要实现以下内容：

<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。