Question

我有一个包含Sub-Total，Discount和Total的html表单。 Discount的选择下拉列表有5％，10％和20％的值。 Sub-Total的选择下拉列表有200美元，100美元和20美元的价值。另一个输入文本字段在Total-Total和Discount上获得Total表格计算。

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

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

要完成的计算是：

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

2K
380K
1.2 M

<强>的JavaScript

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

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更新文本框。

通过在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链接

javascript选择更改字段价格与折扣onchange

4 个答案: