许多 Javascript 求和字段选择并将此值放入输入中 - Javascript sum fields in many select and put this value in a input

我正在使用此脚本从我的数据库MYSQL中恢复一些数据，并且工作正常。我的页面是PHP的。

 <script type = "text/javascript">
$(document).ready(function() {
    $("select#product1").on("change", function() {
        var id = this.value;
        $.ajax({
            url: "ajax.php",
            method: "post",
            data: "id=" + id,
            success: function(response) {
                var datashow = JSON.parse(response);
                price1 = datashow[0].price;
                time1 = datashow[0].time;
                $("input#totalprice").val(price1);
                $("input#totaltime").val(time1);
            }
        });
    });
}); </script>

我的 HTML 是这样的：

<select id="product1" name="product1">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product1" name="product2">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product1" name="product3">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product1" name="product4">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product1" name="product5">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>

<input id="totalprice" type="text" name="totalprice" />
<input id="totaltime" type="text" name="totaltime" />

通过这种方式，我能够填充我的 2 个不同的输入：总时间和总价格，并使用我的 ajax.php 文件恢复的值。

问题是我有 5 种不同的选择，不仅是产品 1，还有产品 2、产品 3、产品 4 和产品 5。

我需要我的 2 个输入，总

价和总时间，为每个选择自动填充从我的 ajax 恢复的值的总和。这意味着我将有（或者可能不是，它们不是必填字段）价格 2 和时间 2、价格 3 和时间 3...

更清楚的是：我有 5 个不同的选择字段，带有动态产品。这些产品中的每一个都有一个价格和存储在mysql中的时间，我通过json恢复。我需要将总价格（每个价格的总和）和总时间存储到输入中。

知道我该如何解决这个问题吗？

谢谢:)

如果我理解正确，您希望遍历 json 数据并将每个价格添加到总变量中，然后将其存储在总价格输入中。我假设 html 标记，您将不得不调整您的 id 和类名以匹配。当然，现在每个输入的值将在 AJAX 调用期间从数据库中动态添加，看起来您已经弄清楚了这部分。只要确保将 JavaScript 代码放在 Ajax 成功函数中即可。

实时预览

.HTML：

<select class="product" name="product1">
<option value="" selected="selected">-</option>
<option value='20'>20</option>
</select>
<select class="product" name="product2">
    <option value="" selected="selected">-</option>
    <option value='30'>30</option>
</select>
<select class="product" name="product3">
    <option value="" selected="selected">-</option>
    <option value='40'>40</option>
</select>
<select class="product" name="product4">
    <option value="" selected="selected">-</option>
    <option value='15'>15</option>
</select>
<select class="product" name="product5">
    <option value="" selected="selected">-</option>
    <option value='22'>22</option>
</select>    
<input id="totalprice" type="text" name="totalprice" />
<input id="totaltime" type="text" name="totaltime" />

JavaScript/JQuery（放在 Ajax Success 函数的末尾）：

var total = 0;
//I am using this to simulate your ajax function since I don't have access to your database
$("select").on("change", function() {
  //Place the following code at the bottom of your ajax success function
  //clear out the total to
  //prevent old prices from being added to the total
  total = 0;
  $(".product").each(function() {
    //if the value is not an empty string
    if ($(this).val() !== "") {
      //add the price to the total
      total += parseInt($(this).val());
    }
  }); //end each function
  //update the total
  $("#totalprice").val(total);
}); //end on change event

更新可选解决方案：根据您的评论，我相信您会想要执行以下操作。现在请记住，您必须更改 ajax 调用的 url，并将 datashow 变量的值切换回您拥有的值。我不得不将其更改为使用 json 文件来模拟您对数据库的调用。

.HTML：

    <div id="products">
<select id="product1" name="product1">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product2" name="product2">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product3" name="product3">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product4" name="product4">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
<select id="product5" name="product5">
    <option value="" selected="selected">-</option>
    <option value='17'>Product1</option>
</select>
        </div>
<input id="totalprice" type="text" name="totalprice" />
<input id="totaltime" type="text" name="totaltime" />

JavaScript：

$(document).ready(function() {
    $("#products select").on("change", function() {
        var id = this.value;
        $.ajax({
            url: "ajax.json",
            method: "get",
            data: "id=" + id,
            success: function(response) {               
         //initialize totalPrice to 0 if doesn't contain a value
         var totalPrice = $("#totalprice").val() !== "" ? parseInt($("#totalprice").val()): 0;
                var datashow =  response;//JSON.parse(response);
                var price1 = parseInt(datashow[0].price);
                var time1 = datashow[0].time;

                //add the total price
                $("input#totalprice").val(totalPrice + price1);
                //Do something similar for time, I don't how you plan on parsing this?
                $("input#totaltime").val(time1);

            }
        });
    });
});

试试这种方式

  var price = parseInt($("input#totalprice").val());
  var time= parseInt($("input#totaltime").val());
  $("input#totalprice").val(price+price1);
  $("input#totaltime").val(time+time1);

当您将值添加到文本框中时，请检查此框的值

var value1 =$("input#totalprice").val();
var totalPrice = parseInt(price1)+parseInt(value1 );
$("input#totalprice").val(totalPrice);