时间戳

首页 > 解决方案 > 我如何从选择中获取输入字段中的数据价格？

javascript - 我如何从选择中获取输入字段中的数据价格？

问题描述

还会有产品 3、4 等。

输入字段名称、价格、id、类是从数据库中动态填充的，因此它们对于不同的项目是相同的。

$(".readers").change(function() {
  var productParent = $(this).parent().parent();
  var newPrice = parseFloat(productParent.find('.price').attr('data-price'));
  productParent.find(".readers option:selected").each(function() {
    newPrice += +$(this).attr('data-price')
  });
  productParent.find(".price").html("£" + newPrice.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 
 
    <label>Size: </label>
    <select class="product-variants readers form-control input-sm" id="readers" name="product_size">
      <option data-price="0" value="Small">Small</option>
      <option data-price="40" value="Medium">Medium</option>
      <option data-price="60" value="Large">Large</option>
    </select>
 
  <input class="price pull-left form-control " itemprop="price" id="price" data-price="5.99">
  
 <br>
 <hr>
 
      <label>Size: </label>
      <select class="product-variants readers form-control input-sm" id="readers" name="product_size">
        <option data-price="0" value="Small">Small</option>
        <option data-price="40" value="Medium">Medium</option>
        <option data-price="60" value="Large">Large</option>
      </select>
    </div>
    <input class="price pull-left form-control" itemprop="price" id="price" data-price="5.99">

标签： javascriptjquery

解决方案

使用父级获得价值。用于data获得价值并获得您的价格。

$(".readers").change(function() {
  var Parent = $(this).parent(".outer");
  var actualPrice = parseFloat(Parent.find('.price').data('price'));
   actualPrice += parseFloat(Parent.find(".readers option:selected").data('price'));
  Parent.find(".price").val(actualPrice.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- added outer div -->
<div class="outer">
  <label>Size: </label>
  <select class="product-variants readers form-control input-sm" id="readers" name="product_size">
    <option data-price="0" value="Small">Small</option>
    <option data-price="40" value="Medium">Medium</option>
    <option data-price="60" value="Large">Large</option>
  </select>

  <input class="price pull-left form-control " itemprop="price" id="price" data-price="5.99">
</div>
<br>
<hr>
<div class="outer">
  <label>Size: </label>
  <select class="product-variants readers form-control input-sm" id="readers" name="product_size">
    <option data-price="0" value="Small">Small</option>
    <option data-price="40" value="Medium">Medium</option>
    <option data-price="60" value="Large">Large</option>
  </select>

  <input class="price pull-left form-control" itemprop="price" id="price" data-price="5.99">
</div>

推荐阅读