javascript - 如何添加动态创建的文本框的所有值

Question

我在计费系统上工作，我有一个下拉菜单，其中包含很多项目和它前面的文本框，这是该项目的价格。

每次使用添加按钮时，我都会调用新的下拉菜单和文本框。

var i = 1;
var j = 11;
$(".btnAdd").click(function() {
  i += 1;
  j += 1;
  $('#myDiv').after('<div class="row"><div class="col"><select id="' + i + '" style="width: 130px"><option value="val1">a</option><option value="val2">b</option><option value="val3">c</option><option value="valn">z</option></select><input type="text" id="' + j + '" /> </div></div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="row">
  <div class="col">
    <select id="  1  " style='width: 130px'>
      <option value='val1'>a</option>
      <option value='val2'>b</option>
      <option value='val3'>c</option>
      <option value='valn'>z</option>
    </select>
    <input type="text" id="  11  " name="txt" />
  </div>
</div>
<button class="btnAdd">Add</button>
<div>
  <input type="text" id=" totval  " name="txt" />
  <button class="Submit">Total</button>
</div>

我的问题是如何在单击 TOTAL 按钮时添加所有值并将其存储在 TOTAL 文本框中？请帮助我..

检查这个 FIDDLE -> https://fiddle.jshell.net/e20hc1wo/2/

Answer 1

试试这个 Fiddle

 var i = 1;
 var j = 11;
 $(".btnAdd").click(function() {
   i += 1;
   j += 1;
   $('#myDiv').after('<div class="row"><div class="col"><select id="' + i + '" style="width: 130px"><option value="val1">a</option><option value="val2">b</option><option value="val3">c</option><option value="valn">z</option></select><input type="text" id="' + j + '" /> </div></div>');
 });
 $('.Submit').on('click', function() {
   var total = 0;
   $('input[type=text]').not('#totval').each(function(index, item) {
     total += parseInt($(item).val());
   });
   $('#totval').val(total);
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="myDiv" class="row">
  <div class="col">
    <select id="  1  " style='width: 130px'>
      <option value='val1'>a</option>
      <option value='val2'>b</option>
      <option value='val3'>c</option>
      <option value='valn'>z</option>
    </select>
    <input type="text" id="  11  " name="txt" />
  </div>
</div>
<button class="btnAdd">Add</button>
<div>
  <input type="text" id="totval" name="txt" />
  <button class="Submit">Total</button>
</div>