javascript select 使用折扣更改字段价格

Question

我有一个 html 表格，其中包含小计、折扣和总计。折扣的 select 下拉菜单有 5%、10% 和 20% 的值。小计的 select 下拉列表有 200 美元、100 美元和 20 美元的值。另一个输入文本字段获取总计形式，计算小计和折扣。

Discount:
<select class="select" name="discount">
  <option value="5" selected>5% discount</option>
  <option value="10">10% discount</option>
  <option value="20">20% discount</option>
</select>

Sub-Total:
<select class="select" name="discount">
  <option value="100" selected>0</option>
  <option value="200">0</option>
  <option value="50"></option>
</select>

Total:
<input type="text" name="price" value="<?php echo $db['sellingprice'] ?>">

我需要的是：

如果输入小计的值为 100 美元，给予小计的折扣为 10%，则总计应更改为 90 美元。

有没有办法在每次更改小计价格或折扣值时更新输入文本框中的总价？

要做的计算是：

total = subTotal - (subTotal * (discount / 100))

我可以用 .onmouseout 做一些类似的事情，但它并没有像我想要的那样工作。

<script>
var discount = 10; 
document.getElementById("sellingprice").onmouseout = function(){
document.getElementById("price").value = parseFloat(document.getElementById("sellingprice").value) * (1.00 - discount)
}
</script>

Answer 1

与jQuery:

$("select").on("change", function() {
    var discount = $(this).val();
    // ensure discount is a number
    discount = parseInt(discount) || 100;

    var price = $("input[name='price']").data("price");
    // ensure price is a number
    price = parseFloat(price) || 0;

    // calculate new price
    price = price * discount / 100;

    // set the price
    $("input[name='price']").val(price.toFixed(2));
});

$(document).ready(function() {
    // store initial price
    $("input[name='price']").data("price", $("input[name='price']").val());

    // trigger change on load to have your initial value
    $("select").trigger("change");
});

Answer 2

这里有 link 到 jsfiddle 如果你想自己玩的话

仅使用 javascript 和 html。这将使用值 selected onchange.

更新文本框

通过在 select 标签上设置 onchange 属性，您可以将 updateInput() 函数注册为 onchange 事件的侦听器。

然后在函数内部您可以使用 document.getElementsByName() 访问元素并操作它们的值。请注意 document.getElementsByName() returns 一个类似数组的元素集合，因此要求我们 select 第一个元素像这样

document.getElementsByName("elementNameGoesHere")[0]

我们想要 select 的元素的索引在这里 ------^

<select class="select" name="discount" onchange="updateInput()">
  <option value="5" selected>5% discount</option>
  <option value="10">10% discount</option>
  <option value="20">20% discount</option>
</select>

<select class="select" name="cost" onchange="updateInput()">
  <option value="500" selected>0</option>
  <option value="100">0</option>
  <option value="20"></option>
</select>

<input type="text" name="price" value="">

<script>
function updateInput(){
    var discount = document.getElementsByName("discount")[0].value;
    var cost = document.getElementsByName("cost")[0].value;
    document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
}
</script>

这里有 link 到 jsfiddle 如果你想自己玩的话

Answer 3

像这样的东西应该可以工作：

本质上，您向 select 元素添加一个事件侦听器和运行一些计算折扣价的简单代码，然后更新折扣价输入值

http://jsbin.com/yafociqoxe/edit?html,js,output

Javascript:

var origPrice = 100;

var discountOption = document.getElementById("discount"),
    discountPrice = document.getElementById("discounted-price");

discountOption.addEventListener('change', function (e) {
  discountPrice.value = origPrice - origPrice * this[this.selectedIndex].value;
});

Html:

<strong>Original Price : 0</strong><br /><br />

  Discount:
<select class="select" id="discount">
  <option value=".05" selected>5% discount</option>
   <option value=".10">10% discount</option>
    <option value=".20">20% discount</option>
</select>
<br />
<br />
Dicounted Price:
<input type="text" id="discounted-price" name="price" value="95">

Answer 4

这应该适合你。

JSFiddle

HTML

Discount:
<select class="select" name="discount" onchange="updateInput()">
   <option value="5" selected>5% discount</option>
   <option value="10">10% discount</option>
    <option value="20">20% discount</option>
</select>

Price:
<input type="text" name="price" value="">

JavaScript

function updateInput(){
    //get the current amount from the 'discount' field
    var discount = document.getElementsByName("discount")[0].value;
    //get the current amount from the 'price' field
    var currentPrice = document.getElementsByName("price")[0].value;
    //new price should be "old price" - "discount%" * "old price"
    document.getElementsByName("price")[0].value =  currentPrice - ((discount/100) * currentPrice);
}

javascript select 使用折扣更改字段价格

javascript select change field price with discount onchange

html

javascript

jquery

onchange