Question

我正在使用此脚本从我的数据库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个不同输入：总时间和 totalprice ，并使用我的ajax.php文件恢复该值。

问题是我有5种不同的选择，不仅是product1，还有product2，product3，product4和product5。

我需要我的2输入，总价和总时间，自动填入从我的ajax中恢复的值的总和，用于每个选择。这意味着我将（或许不是，它们不是必填字段）price2和time2，price3和time3 ......

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

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

谢谢：）

Answer 1

在此之前向文本框添加值时，请检查此框的值

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

Answer 2

试试这种方式

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

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

Answer 3

如果我正确理解你，你想循环浏览json数据并将每个价格添加到总变量中，然后将其存储在totalprice输入中。我假设html标记，你将不得不调整你的id和类名来匹配。当然，在AJAX调用期间，每个输入的值都会从数据库中动态添加，看起来你已经想出了这个部分。只需确保将JavaScript代码放在Ajax成功函数中。

Live Preview

<强> 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成功函数的末尾）：

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


            }
        });
    });
});

许多Javascript sum字段选择并将此值放入输入中

3 个答案: