JavaScript 选择更改字段价格与折扣更改

javascript select change field price with discount onchange

本文关键字：字段 选择 JavaScript      更新时间：2023-09-26

我有一个包含小计、折扣和总计的 html 表单。"折扣"的选择下拉列表具有 5%、10% 和 20% 的值。"小计"的选择下拉列表具有 $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>$100</option>
  <option value="200">$200</option>
  <option value="50">$50</option>
</select>
Total:
<input type="text" name="price" value="<?php echo $db['sellingprice'] ?>">

我需要的是：

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

每次更改小计价格或折扣值时，是否有任何方法可以更新输入文本框中的总价？

要完成的计算是：

总计 = 小计 - （小计 *（折扣/100））

我能够用.onmouseout做类似的事情，但它并没有完全按照我想要的方式工作。

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

这应该适合你。

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

使用 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");
});

这样的事情应该可以工作：

实质上，您将事件侦听器添加到 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;
});

目录：

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

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

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

通过在 select 标记上设置 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的链接，如果你想自己玩它

相关文章：