更改功能更改了错误的行

时间:2019-01-14 22:49:26

标签: javascript

我将动态行与onChange函数结合使用。第一行是用HTML手动编写的,其他行是用Javascript创建的。

我正在使用count函数在动态行中定义ID。

以下是用HTML手动编写的行的示例:

<div id="asdasd123">
<div id="row_id_1">
  <div>
    <select id="plusmin1" name="plusmin[]" onChange="getVers1(this.value)" data-srno="1">
      <option selected="disabled" value="0"> </option>
      <option value="1">Data one</option>
      <option value="2">Data two</option>
      <option value="3">Data three</option>
    </select>
  </div>

  <div class="form-group">
    <input type="text" name="totalprice[]" id="totalprice1" data-srno="1">
  </div>
</div>
<script>
  function getVers1() {
    var numVal1 = Number(document.getElementById('plusmin1').value);
    var totalValue = numVal1 * 100

    document.getElementById('totalprice1').value = totalValue.toFixed(2);
  }
</script>
<input type="text" name="total_item" id="total_item" value="1" />
<button type="button" name="add_row" id="add_row" class="btn btn-success">New row</button>

当您点击add_row脚本时,add`s将使用以下脚本创建新行:

<script>
  $(document).ready(function(){
  var count = 1;

    $(document).on('click', '#add_row', function(){
      count++;
      $('#total_item').val(count);
      var html_code = '';
      html_code += '<div id="row_id_'+count+'">';
          html_code += '<div><select id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'"><option selected="disabled" value="0"> </option><option value="1">Data one</option><option value="2">Data two</option><option value="3">Data three</option></select></div>';
          html_code += '<div class="form-group"><input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'"></div></div>';

      $('#asdasd123').append(html_code);


      }
    });
        $(document).on('change', '[id^=plusmin]', function selectQuantity(selectedValue){
          var numVal2 = Number(document.getElementById('plusmin'+count+'').value);
          var totalValue2 = numVal1 * 100

          document.getElementById('totalprice'+count+'').value = totalValue2.toFixed(2);
        });
  });
</script>

我的脚本中的count有问题。

当我的屏幕上只有一行并更改plusmin1的值时,脚本会很好地运行onchange。

当我的屏幕上有两行并更改plusmin2的值时,脚本也将起作用。但是,当我更改plusmin1的值时,脚本也会更改totalprice2。这是我用于第二行的文本框。

有人知道原因吗?为什么当我更改第一行的值时脚本会更改第二个文本框的值?

1 个答案:

答案 0 :(得分:0)

  

主要问题是,您必须将值设置为文本字段   对应于该特定选择。

假设您选择选项为“数据二”,那么它应该仅在相应的文本字段中设置200.00。但您的情况是打算将其设置为尚未添加/创建的文本字段2。

选择(非选项)和文本字段的

ID将齐头并进。然后,根据所选选项设置值。

我尝试模拟。请尝试。

<script type="text/javascript">
    $(document).ready(function(){
        var count = 1;

        $(document).on('click', '#add_row', function(){
            ++count;
            $('#total_item').val(count);
            var html_code = '<div id="row_id_'+count+'">'+
                            '<div>' +
                                '<select class="changePrice" id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'">' +
                                    '<option selected="disabled" value="0"> </option>' +
                                    '<option value="1">Data one</option>' +
                                    '<option value="2">Data two</option>' +
                                    '<option value="3">Data three</option>' +
                                '</select>' +
                             '</div>'+
                            '<div class="form-group">' +
                                '<input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'">' +
                            '</div>' +
                        '</div>';

            $('#asdasd123').append(html_code);
        });
    });

    $(document).on('change', '.changePrice', function (){
        var optionIndex = $('option:selected',this).attr('value');
        var numVal2 = Number(optionIndex);
        var totalValue2 = numVal1 * 100;

        document.getElementById('totalprice'+optionIndex+'').value = totalValue2.toFixed(2);
    });

    function updatePrice() {
        var numVal1 = Number(document.getElementById('plusmin1 :selected').value);
        var totalValue = numVal1 * 100

        document.getElementById('totalprice1').value = totalValue.toFixed(2);
    }

</script>

$(document).ready(function(){
        var count = 1;

        $(document).on('click', '#add_row', function(){
            ++count;
            $('#total_item').val(count);
            var html_code = '<div id="row_id_'+count+'">'+
                            '<div>' +
                                '<select class="changePrice" id="plusmin'+count+'" name="plusmin[]" data-srno="'+count+'" updateToBox="'+count+'">' +
                                    '<option selected="disabled" value="0">select</option>' +
                                    '<option value="1">Data one</option>' +
                                    '<option value="2">Data two</option>' +
                                    '<option value="3">Data three</option>' +
                                '</select>' +
                                '<input type="text" name="totalprice[]" id="totalprice'+count+'" data-srno="'+count+'">'+
                             '</div>'+
                        '</div>';

            $('#asdasd123').append(html_code);
        });
    });

    $(document).on('change', '.changePrice', function (){
    //alert("clicked : "+$(this).val());
        var optionIndex = $(this).val();
        var updateToBox = $(this).attr('updateToBox');
        var numVal2 = Number(optionIndex);
        var totalValue2 = numVal2 * 100;

        document.getElementById('totalprice'+updateToBox+'').value = totalValue2.toFixed(2);
    });

    
    function getVers1() {
      var numVal1 = Number(document.getElementById('plusmin1').value);
      var totalValue = numVal1 * 100

      document.getElementById('totalprice1').value = totalValue.toFixed(2);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="asdasd123">
Total fileds <input type="text" name="total_item" id="total_item" value="1" />
<button type="button" name="add_row" id="add_row" class="btn btn-success">New row</button>
<hr/>
<div id="row_id_1">
  <div>
    <select class="changePrice" id="plusmin0" name="plusmin[]" data-srno="0" updateToBox="0">
      <option selected="disabled" value="0">select</option>
      <option value="1">Data one</option>
      <option value="2">Data two</option>
      <option value="3">Data three</option>
    </select>
    <input type="text" name="totalprice[]" id="totalprice0" data-srno="1">
  </div>
</div>