根據用戶選擇選項計算每個表格中兩個單元格的總數

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>