Question

我有一个表单，根据所选的下拉列表进行某些计算。一切正常，但是当我从下拉价格/单位字段中选择一个值时，必须通过计算返回NaN的（total1 / qty）来填充。请帮忙吗？我的标记如下：

 <html>

 <head>
 <title>Dept</title>
   <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>

 <script type='text/javascript'>//<![CDATA[
 $(window).load(function(){
 $(document).ready(function(){
  $("select").on('change',function () {
    var dept_number = $(this).val();
    var price = $(this).find(':selected').data('price');

 $(this).closest('table').find('.deptip').val(dept_number);
 $(this).closest('table').find('.priceip').val(price);
 $(this).closest('table').find('.total1').val(price * $(this).closest('table').find('.total').data('value'));
  $(this).closest('table').find('.price_unit').val($(this).closest('table').find('.total1').data('value') / $(this).closest('table').find('.qty').data('value'));

  });
  });
  });//]]> 




 </script>

 </head>

  <body>
  <div class="base"> <!--Keep each group in base container-->
  <table border="1"><tr>
   <td><select id="category0">
   <option value="1" data-price="10">USD</option>
   <option value="2" data-price="20">INR</option>
   <option value="3" data-price="30">AUD</option>
    </select></td>
    <td><label>Dept. num:</label>
     <input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
     <td><label>Price:</label>
     <input type="text" class="priceip" id="price-input"/> <!--a class here too--></td>
     <td><label>Total:</label><input data-value="50" type="text" readonly class="total" value="50"/></td>
     <td><label>Qty:</label><input type="text" class="qty" value="5"/></td>
     <td><label>Total1:</label><input data-value="50" type="text" readonly class="total1"/></td>
    <td><label>Price/Unit:</label><input type="text" readonly class="price_unit" /></td>


  </tr></table>
  </div>

  <div class="base"> <!--Keep each group in base container-->
  <table border="1"><tr>
  <td><select id="category1">
   <option value="1" data-price="10">USD</option>
   <option value="2" data-price="20">INR</option>
   <option value="3" data-price="30">AUD</option>
   </select></td>
    <td><label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
     <td><label>Price:</label>
     <input type="text" class="priceip" id="price-input"/> <!--a class here too--></td>
     <td><label>Total:</label><input data-value="50" type="text" readonly class="total" value="50"/></td>
       <td><label>Qty:</label><input type="text" class="qty" value="5" /></td>
      <td><label>Total1:</label><input data-value="50" type="text" readonly class="total1"/></td>
      <td><label>Price/Unit:</label><input type="text" readonly class="price_unit"/></td>

   </tr></table>
  </div>

  <div class="base"> <!--Keep each group in base container-->
  <table border="1"><tr>
   <td><select id="category2">
   <option value="1" data-price="10">USD</option>
   <option value="2" data-price="20">INR</option>
   <option value="3" data-price="30">AUD</option>
</select></td>
<td><label>Dept. num:</label>
<input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
<td><label>Price:</label>
<input type="text" class="priceip" id="price-input"/> <!--a class here too--></td>
<td><label>Total:</label><input data-value="50" type="text" readonly class="total" value="50"/></td>
    <td><label>Qty:</label><input type="text" class="qty" value="5" /></td>
<td><label>Total1:</label><input data-value="50" type="text" readonly class="total1"/></td>
    <td><label>Price/Unit:</label><input type="text" readonly class="price_unit"/></td>


 </tr></table>
  </div>
 </body>

 </html>

Answer 1

您需要使用parseInt或parseFloat

将string var转换为float或int

 $(this).closest('table').find('.price_unit').val(parseInt($(this).closest('table').find('.total1').attr('value')) / parseInt($(this).closest('table').find('.qty').attr('value')));

Answer 2

您的.qty输入中有value，而您正试图获取data-value

试试这个

$("select").on('change', function () {
    var dept_number = $(this).val();
    var price = $(this).find(':selected').data('price');
    $(this).closest('table').find('.deptip').val(dept_number);
    $(this).closest('table').find('.priceip').val(price);
    $(this).closest('table').find('.total1').val(price * $(this).closest('table').find('.total').data('value'));
    $(this).closest('table').find('.price_unit').val($(this).closest('table').find('.total1').data('value') / $(this).closest('table').find('.qty').val());

});

https://jsfiddle.net/zu6uvzxv/2/

Jquery计算问题（返回NaN）

2 个答案: