根据每个表格从选择菜单中选取的数量更新价格

时间：2019-06-04 22:07:03

标签： jquery html forms

我正在做一个简单的计算，计算初始产品价格，然后基于数量（选择元素），将总价格乘以所选值。

进行选择时，我希望更新总价。因此，对于下面的产品，如果我选择值5，则总价现在应该是50。

我还想确保仅更新更改选择的表格，而不要更新总价。

http://jsfiddle.net/o9uLm17z/2/ 

var quantity = $('.product-item option:selected').find(":selected").val();
    var price = $('.total-price').text();
    
    $('.total-price').val(quantity * price);
    
    $('.product-select').change(function() {
        var quantity = $(this).find(":selected").val();
        var price = $('.total-price').val();
    
        $('.total-price').val(quantity * price);
    });
    <form method="post" action="/" class="product-item">
      <p>
        Product One
      </p>
      <div class="total-price">10</div>
      <select name="quantity" class="product-select" tabindex="1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      </select>
    </form>

4 个答案:

答案 0 :(得分：0)

您所缺少的是价格的基值并将其解析为整数/浮点数。 您还需要获取最接近的表单，然后找到.total-price类以打印输出。 这是给您的JSFIDDLE。 

jQuery('.product-select').on('change', function() {
    var el = $(this);
    var quantity = parseInt(el.val());
    var price = parseInt(el.closest('.product-item').find('[name="price"]').val());
    el.closest('.product-item').find('.total-price').text(quantity * price);
});
form {
  background: teal;
  padding: 10px;
  margin-bottom: 10px;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form method="post" action="/" class="product-item">
  <p>
    Product One
  </p>
  <input type="hidden" value="10" name="price">
  <div class="total-price">10</div>
  <select name="quantity" class="product-select" tabindex="1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  </select>
</form>

<form method="post" action="/" class="product-item">
  <p>
    Product Two
  </p>
  <input type="hidden" value="10" name="price">
  <div class="total-price">40</div>
  <select name="quantity" class="product-select" tabindex="1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  </select>
</form>

答案 1 :(得分：0)

如果您能够修改HTML，以使您的基本价格和总价格不会占据相同的div，那么我可以将数据价格添加到选择中，而只需使用通用函数即可简化。

$.generate_price = function(){
$(".product-select").each(function(){
      $(this).prev(".total-price").html(parseFloat($(this).data("price")) * parseInt( $(this).find("option:selected").val()));
    });
}    
    
    $('.product-select').change(function() {
        $.generate_price();
    });
    
    $.generate_price();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="/" class="product-item">
      <p>
        Product One
      </p>
      <div class="total-price"></div>
      <select data-price="10" name="quantity" class="product-select" tabindex="1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      </select>
      
            <p>
        Product Two
      </p>
      <div class="total-price"></div>
      <select data-price="15" name="quantity" class="product-select" tabindex="1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      </select>
    </form>

答案 2 :(得分：0)

  1. 将表单绑定到change事件

    $(".product-item").on('change',...

  2. 将选择分配为第二个参数（event.data或$(this)）

    ...'.product-select',...

  3. 第三个参数是callback function 

    ...function(e) {...

  4. 获取所选内容的value并将其转换为real number 

    var qty = Number($(this).val());

  5. 获取输出值并将其转换为实数

    Number($(this).prev('.total-price').val());

  6. 最后，获取两个元素的乘积并将其分配给输出的值

    $(this).prev('.total-price').val(qty * prc);

记住form controls（输入，选择，输出等）将它们的值存储为字符串“ 3”不等于3。为了隔离每个输出/选择对，请使用$(this) {{3 }}指定与选择有关的输出。同样对于语义，使用了标签和输出元素来代替div。输出是一种特殊的表单控件，因为它可以存储值或具有文本内容，并且具有其他有用的功能，请参见.prev()上的本文。

$(".product-item").on('change', '.product-select', function(e) {
  var qty = Number($(this).val());
  var prc = Number($(this).prev('.total-price').val());
  $(this).prev('.total-price').val(qty * prc);
});
select {
  display: block;
}
<form method="post" action="/" class="product-item">
  <label>
        Product One
    </label> <br> Total Price: <output class="total-price" value='10'>10</output>
  <select name="quantity" class="product-select" tabindex="1">
    <option value='' selected>Select Quantity</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
  <hr>
  <label>
        Product Two
   </label> <br> Total Price: <output class="total-price" value='10'>10</output>
  <select name="quantity" class="product-select" tabindex="1">
    <option value='' selected>Select Quantity</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
  </select>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

答案 3 :(得分：0)

尝试以下方法 它对我有用：

HTML： 

 <form method="post" action="/" class="product-item">
        <p>
          Product One
        </p>
        <strong> Unit Price:</strong><div class="product1-Item-price">10</div>
        <strong> Total Price:</strong><div class="product1-total-price">10</div>
        <select id="product1" onchange="calculteTotal(event)" name="quantity" class="product-select" tabindex="1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        </select>
      </form>

      <form method="post" action="/" class="product-item">
        <p>
          Product Two
        </p>
        <strong> Unit Price:</strong><div class="product2-Item-price">10</div>
        <strong> Total Price:</strong> <div class="product2-total-price">40</div>
        <select  id="product2" onchange="calculteTotal(event)" name="quantity" class="product-select" tabindex="1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        </select>
      </form>

JS 

function calculteTotal(evt){
var price = $("." + evt.target.id + "-Item-price").text();
var quantity = $('#'+evt.target.id).val();
$("." + evt.target.id + "-total-price").text(quantity * price)
}
相关问题
最新问题