Estoy haciendo la edición de un pedido, y este va por filas. Tengo 5 columnas en la vista:
1)Producto -> es un select, donde cargo los productos de la BD
2)Opcion -> este es otro select que tiene que ser dependiente del primero
3)Precio -> depende la opción que elijan se tiene que llenar con el precio
Vale muestro lo que tengo en la vista:
@php $contador =1 @endphp
@foreach ($pedidos as $key => $ped)
<tr data-fila="{{ $contador }}" id="InputsWrapper">
<td>
<select class="form-control selectSTer js-example-basic-single selectProductos idProducto" name="eProducto[]" style="min-height: 38px;">
<option value="" selected>Selecciona un producto </option>
@foreach ($productos as $pro)
<option value="{{ $pro->id}}" {{ ( $pro->id== $ped->idProducto) ? 'selected' : '' }}> {{ $pro->name }} </option>
@endforeach
</select>
</td>
<td>
<select class="form-control selectSTer js-example-basic-single" name="eTipo[]" style="min-height: 38px;">
<option value="">Selecciona una opción </option>
@foreach ($numPedido2 as $item)
<option value="{{ $item->idCombias}}" {{ ( $item->idCombias== $ped->idCombi) ? 'selected' : '' }}> {{ $item->combination }} </option>
@endforeach
</select>
</td>
<td><input type="text" class="form-control selectTercero inputcalculo ePrecioUnid" name="ePrecioUnid[]" value="{{number_format($ped->precio, 2)}}" autocomplete="off"></td>
<td style="width: 30px;"><input type="text" class="form-control selectTercero inputcalculo cntComprada" name="cntComprada[]" value="{{ $ped->cantidad }}" autocomplete="off"></td>
<td><input type="text" class="form-control selectTercero inputcalculo eSubTotal" name="eSubTotal[]" value="{{number_format($ped->subtotal, 2)}}" autocomplete="off"></td>
<td><a href="#"><i class="far fa-trash-alt iconTask"></i></a></td>
</tr>
@php $contador= $contador + 1; @endphp
@endforeach
Luego tengo un botón para añadir fila al pedido:
<div class="pull-right" style="margin-top: 1%;">
<a href="#" id="add" class="aFila" ><i class="icon-plus"></i> Añadir fila</a>
</div>
Y ahora muestro el Jquery con el que añado filas:
$('#add').click(function(event) {
$("#tabla").each(function() {
x++;
var tds = '<tr data-fila='+x+' id="InputsWrapper">';
jQuery.each($('tr:last td', this), function(index, element) {
var html = $(this).html();
if(index == 0){
html = '<select class="form-control selectSTer js-example-basic-single selectProductos idProducto" name="eProducto[]" style="min-height: 38px;">'+$(this).find('select').html()+'</select>';
var idProducto = document.getElementsByClassName('idProducto');
console.log(idProducto);
}
if(index == 1){
html = '<select class="form-control selectSTer js-example-basic-single" name="eTipo[]" style="min-height: 38px;"></select>';
}
if(index == 2){
html = '<input type="text" class="form-control selectTercero inputcalculo ePrecioUnid" name="ePrecioUnid[]" value="" autocomplete="off">';
}
if(index == 3){
html = '<input type="text" class="form-control selectTercero inputcalculo cntComprada" name="cntComprada[]" value="" autocomplete="off">';
}
if(index == 4){
html = '<input type="text" class="form-control selectTercero inputcalculo eSubTotal" name="eSubTotal[]" value="" autocomplete="off">';
}
tds += '<td>' + html+ '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
var envio = $('#elEnvio').val()
if(envio == 'undefined'){
envio = 0;
return envio;
}
actualizarTotales(envio);
});
Intento sacar el valor del select con var idProducto = document.getElementsByClassName('idProducto');
pero no me devuelve nada la consola, supongo que no sabe en que linea está. No se muy bien como puedo hacerlo.
$(".idProducto option").each(function(){ // $(this).val() });
para obtener los elementos del select$(".idProducto option:selected").val()
obtienes el valor del elemento seleccionado