javascript选择带有折扣onchange的更改字段价格[关闭]

Question

我有一个包含小计、折扣和总计的 html 表单。折扣的选择下拉菜单有 5%、10% 和 20% 的值。 Sub-Total 的选择下拉菜单有 200 美元、100 美元和 20 美元的值。另一个输入文本字段获取 Total 表单，计算 Sub-Total 和 Discount。

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>$100</option>
  <option value="200">$200</option>
  <option value="50">$50</option>
</select>

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

我需要的是：

如果输入的 Sub-Total 有一个值，比如 $100，而提供给 Sub-Total 的折扣是 10%，那么 Total 应该更改为 $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

这应该适合你。

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);
}

Answer 2

使用 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 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 : $100</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 的链接

仅使用 javascript 和 html。这将使用所选值onchange 更新文本框。

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

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

document.getElementsByName("elementNameGoesHere")[0]

我们要选择的元素的索引放在这里--------^

<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>$500</option>
  <option value="100">$100</option>
  <option value="20">$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>

如果您想自己玩的话，这里有一个jsfiddle 的链接