buenas tardes y gracias de antemano por vuestra ayuda ante mis dudas.
Tengo un formulario que multiplica valores y suma los totales de las filas a medida que estas se van incrementando. El problema que tengo es que no sé como sumar el valor del option seleccionado en el select y que este se actualize tambien con respecto al número de filas en tiempo real. Tambien quiero mostrar el total completo con un botón en vez de en un input y que sume lineas dependiendo del tipo de option elegido; es decir las lineas que contienen un tipo de valor del option por un lado y las lineas que contienen otro tipo de option, por otro
<script>
$(document).ready(function () {
$(".add").click(function () {
var length = $('.one').length;
var cloned = $(this).closest('.one').clone(true);
cloned.appendTo("#mainDiv").find('.sno').val(length + 1);
cloned.find(':input:not(".sno")').val(" ");
var parent = $(this).closest('.one');
calculate(parent);
});
$('.delete').click(function () {
var parent = $(this).closest('.one');
$(this).parents(".one").remove();
calculate(parent);
});
});
$(document).on('keyup', '.tbs, .ndiscos', function () {
var parent = $(this).closest('.one');
calculate(parent);
})
function calculate(e){
var tbs = +$(e).find('.tbs').val(); //Valor de tbs
var ndiscos = +$(e).find('.ndiscos').val();//Valor del nº de Discos
var sum = 0;
$(e).find('.total').val(tbs*ndiscos);
$('.total').each(function(i,e){
sum += +$(e).val();
});
$('#Grand').val(sum);
};
</script>
<div class="container">
<div id="mainDiv">
<div class="row one">
<div class="col-lg-3">
<select class="tipoDisco calculaselect" id="tipoDisco" name="tipoDisco" data-rule-required="true" title="Choose Group Size...">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-2">
<input type="text" name="tbs" class="tbs">
<label>TBS</label>
</div>
<div class="col-lg-3">
<input type="text" name="ndiscos" class="ndiscos">
<label>Nº de Discos</label>
</div>
<div class="col-lg-2">
<input type="text" name="total" class="total">
<label for="total">total</label>
</div>
<div class="col-lg-2">
<div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light add ">Add<i class="mdi-content-add"></i></a>
</div>
<div class="input-field col s1"> <a href="#" class="btn-floating waves-effect waves-light delete ">Remove<i class="mdi-content-clear"></i></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<input type="text" name="Grand" id="Grand">
<label for="net_rate">Grand Total</label>
</div>
</div>
</div>
</div>