Question

我有一个表格可以实时自动计算选择。

在下面的脚本中，有一个两个表单选择字段的示例，它们都有它们的计算值，但我想知道是否可能让第二个选择表单的值与从中选择的值相乘第一个？

意思是第一个＆＃34; man＆＃34;每个人力60美元，第二个＆＃34;楼梯＆＃34;每个楼梯30美元。

我希望每人每个楼梯30美元。因此，如果选择2个人力，楼梯实际上是每个楼梯60美元。

有什么方法可以解决这个问题吗？

表格：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <select id="man" input name="man" class="calculate">
       <option data-price="0" value="">0</option>
       <option data-price="60" value="Manpower x 1">1</option>
       <option data-price="120" value="Manpower x 2">2</option>
       <option data-price="170" value="Manpower x 3">3</option>
    </select>

    <select id="stairs" input name="stairs" class="calculate">
       <option data-price="0" value="">0</option>
       <option data-price="30" value="Stairs x 1">1</option>
       <option data-price="60" value="Stairs x 2">2</option>
       <option data-price="90" value="Stairs x 3">3</option>
    </select>

    <dl class="total">
    <dt>Total</dt>
    <dd>$<span id="item-price"></span> SGD</dd>
    </dl>

javascript：

<script>
 var basePrice = <?php $name = $_POST["item_price"]; echo $name; ?>; 
 $(document).ready(function() {
 $("select.calculate").on("change", calc);
 $("input[type=checkbox].calculate").on("click", calc);
 $("#item-price").html(basePrice);
 $("#item_price_val").val(basePrice);
});
function calc() {
newPrice = basePrice;
$("select.calculate option:selected,input[type=checkbox].calculate:checked").each(function() {
  newPrice += parseInt($(this).data('price'), 10);
});
newPrice = newPrice.toFixed(0);
$("#item-price").html(newPrice);
$("#item_price_val").val(newPrice);
}
</script>

Answer 1

遵循当前的代码示例有点困难，但我会尽力帮助。

一个主要问题是您的each功能设置错误。
此外，我还使用了data函数来存储某些状态。

见下面的例子：

var basePrice = 10;// Using 10 here so that its runable code.

function setupStairs() {
  // Generates a multiple to multiply start pice in #stairs by
  var multiple = $("#man").val().substr(-1);
  if ($("#man").val().length == 0) { multiple = 0; }
  
  // Simple 1 liner to disabled stairs if no manpower
  $("#stairs").prop("disabled", multiple == 0);
  // This will clear the value of stairs so that it is reset when manpower is changed
  $("#stairs").val("");
  
  // Sets the value of data-price in #stairs based on data-starting-price
  // Uses the last char in the value attribute of #man
  $.each($("#stairs option"), function() {
    var newPrice =  multiple * $(this).data("starting-price");
    $(this).data("price", newPrice);
  });
  
  // Code for testing
  $("#tdManPower").text(multiple);
  $("#tdManCost").text($("#man option:selected").data("price"));
}

function calc() {
  var manPrice = $("#man option:selected").data("price");
  var stairPrice = $("#stairs option:selected").data("price");
  var newPrice = manPrice + stairPrice;
  
  var total = basePrice + newPrice;
  $("#item-price").text(total);
  $("#item_price_val").val(total);
  
  // Code for testing
  var multiple = $("#stairs").val().substr(-1);
  if ($("#stairs").val().length == 0) { multiple = 0; }
  
  $("#tdBasePrice").text(basePrice);
  $("#tdStairs").text(multiple);
  $("#tdStairsCost").text(stairPrice);
  $("#tdTotal").text(total);
}

// To load the values for calc
$(function () { setupStairs(); calc(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="man" name="man" class="calculate" onchange="setupStairs(); calc();">
   <option data-price="0" value="" selected>0</option>
   <option data-price="60" value="Manpower x 1">1</option>
   <option data-price="120" value="Manpower x 2">2</option>
   <option data-price="170" value="Manpower x 3">3</option>
</select>

<select id="stairs" input name="stairs" class="calculate" onchange="calc();" disabled>
   <option data-starting-price="0" data-price="0" value="">0</option>
   <option data-starting-price="30" data-price="30" value="Stairs x 1">1</option>
   <option data-starting-price="60" data-price="60" value="Stairs x 2">2</option>
   <option data-starting-price="90" data-price="90" value="Stairs x 3">3</option>
</select>

<dl class="total">
  <dt>Total</dt>
  <dd>$<span id="item-price"></span> SGD</dd>
  <input id="item_price_val" type="hidden" />
</dl>

<!-- Table for testing -->
<table style="float:right; position:relative; top:-80px; right:50px;">
  <tr><td>basePrice</td><td id="tdBasePrice"></td></tr>
  <tr><td>manPower</td><td id="tdManPower"></td></tr>
  <tr><td>manCost</td><td id="tdManCost"></td></tr>
  <tr><td>stairs</td><td id="tdStairs"></td></tr>
  <tr><td>stairsCost</td><td id="tdStairsCost"></td></tr>
  <tr></tr>
  <tr><td>total</td><td id="tdTotal"></td></tr>
</table>

条件计算表格

1 个答案: