从 value 和 key ,如何获取 key 并进行 price 和 Quantity 的乘法?

From value and key , How to fetch the key and do the multiplication of price and Quantity?

当我 select 类别时,它会在 select 框中显示价格,但是当我将值放入数量框时,它会乘以价格的值和数量并显示总计,但其中当总计到来时,它是从 id 中获取价格和数量乘以的 id .. 我想要数量和价格的乘积而不是价格的价值..那我怎么能???

Javascript select 子类别的价格值

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script type="text/javascript">
    // now change price..........
     $(document).ready(function() 
     {    
         $('select#subcategory').on('change', function() {
            if(subID = $(this).val()) 
            {
                $.ajax({
                        url: "{{url('/')}}" + '/Purchaser/add_purchaser/ajax/' + subID,
                        type: "GET",
                        dataType: "json",
                        success: function(data)
                        {
                            console.log(data);
                             $('select#productprice').empty();
                             $.each(data, function(key, value)
                             {
                                   var option = new Option(value, key);
                                   $(option).html(value);
                                   // $(option).html(value);
                                   $('select#productprice').append(option);
                             });
                        }
                    });
            }else{
                $('select#productprice').empty();
            }
         });
    }); 
    </script>

javascript 总计

<script type="text/javascript">
$('tbody').delegate('#price,#quantity','keyup',function(){
  var tr = $(this).parent().parent();
  var price = tr.find('#productprice').val();
  var quantity = tr.find('#quantity').val();
  var total = (price * quantity);
  tr.find('#total').val(total);
});
</script>

Html 文件

<tbody>
   <tr>
      <td>
         <select class="form-control" name="cat_id[]" id="category">
             <option value="" disabled selected>Select Category</option>
                @foreach($category as $key)
                    <option value="{{ $key->id }}">{{ $key->cat_nm }}</option>
                @endforeach
         </select>
      </td>
      <td>
        <select class="form-control" id="subcategory" name="sub_cat_id[]">
          <option value="" disabled selected>Subcategory from category</option>
        </select>
     </td>
     <td>
       <select class="form-control" id="productprice" name="price_id[]">  
           <option>Price from subcategory</option>                                     
        </select>
     </td>
     <td>
        <input type="text" class="form-control" name="quantity[]" id="quantity">
      </td>
      <td>
         <input type="text" class="form-control" name="total[]" id="total">
       </td>
       <td>
          <a href="#" class="btn btn-danger" id="remove"><i class="fa fa-remove"></i></a>
        </td>
        </tr>
</tbody>

使用 var price = $( "#productprice option:selected" ).text();而不是 var price = tr.find('#productprice').val();就像下面的脚本....

 <script type="text/javascript">
      $('tbody').delegate('#price,#quantity','keyup',function(){
        var tr = $(this).parent().parent();
        var price = $( "#productprice option:selected" ).text();
        // var price = tr.find('#productprice').val();
        var quantity = tr.find('#quantity').val();
        var total = (price * quantity);
        tr.find('#total').val(total);
      });
</script>