根据用户选择选项计算每个表格中两个单元格的总数

Question

我一直在努力解决这个问题。我有一个多行的表。每行都有一个数量（静态数字），一个有数字的选择框和一个总列数。我想要做的是当用户在下拉列表中选择一个值时，数量将乘以用户选择并立即在同一行的总列中显示结果。我试图使用vuejs和jquery，并不断打墙。

这里是我的vuejs代码：请注意评论

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
      total: '' 
     }, 
     methods: { 
      calculateTotal: function(skid, quantity) 
      { 
       this.total = skid * quantity 
      } 
     } 
    }); 
</script> 

<td>{{$part->skid_quantity}}</td> 
         <td>@{{ total }}</td> 
         <td> 
          <div class="form-group{{ $errors->has('quantity')? ' has-error' : ''}}"> 
           <select name="quantity[]" class="form-control" v-on:change="calculateTotal('{{$part->skid_quantity}}','How to get the selected quantity value in the form below for each row')"> 
            @for($i = 0; $i <= $part->quantity; $i++) 
             <option value="{{$i}}">{{$i}}</option> 
            @endfor 
           </select> 
           {!! Form::hidden('parts_id[]', $part->id) !!} 
           {!! Form::hidden('slug', $category->slug) !!} 
          </div> 
         </td> 

非常感谢您

Answer 1

你可以尝试这样的事情在JQuery中

<tr> 
    <td class="fixnumber">5</td> 
    <td class="total"></td> 
    <td> 
     <div class="form-group"> 
      <select name="quantity[]" class="form-control quantity"> 
      <option value="none">select an option</option> 
      <option value="2">2</option> 
      </select> 
     </div> 
    </td> 
</tr> 


var select = $(".quantity"); 
select.on("change", function() { 
    $(this).change(function(key, value){ 
     $(this).closest(".total").text(parseInt($(this).closest(".fixnumber").text())*parseInt($(this).val())) 
    }) 
}); 

Answer 2

你可以尝试这样的事情在VueJS

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
      total: '', 
      quantity: [] 
     }, 
     methods: { 
      calculateTotal: function (skid) 
      { 
       this.total = ''; 
       for (var i = 0; i < this.quantity.length; i++) { 
        this.total += skid * this.quantity[i]; 
       } 

      } 
     } 
    }); 
</script> 

<td>{{$part->skid_quantity}}</td> 
<td>@{{ total }}</td> 
<td> 
    <div class="form-group{{ $errors->has('quantity')? ' has-error' : ''}}"> 
     <select name="quantity[]" class="form-control" v-on:change="calculateTotal('{{$part->skid_quantity}}')" v-model="quantity"> 
      @for($i = 0; $i <= $part->quantity; $i++) 
      <option v-bind:value="{{$i}}">{{$i}}</option> 
      @endfor 
     </select> 
     {!! Form::hidden('parts_id[]', $part->id) !!} 
     {!! Form::hidden('slug', $category->slug) !!} 
    </div> 
</td>