Tengo un formulario en Laravel Blade que contiene datos que deben ocultarse y mostrarse dinámicamente. Aquí está el código.
@foreach ($working_orders as $key => $order) <div class="col-lg-12 row "> <div class="title-md">Work Order # {{$order->id}}</div> <div class="form-group col-lg-6"> <label style="color: #44484d;">Camión</label> <select class="form-control kt-selectpicker truck_type" required name="truck_type" onchange="getOrderFields()"> <option value="1" selected>No asignar</option> <option value="2">Asignar empresa de logística</option> </select> </div> </div> <div class="form-group col-lg-6 assigner_div"> <label style="color: #44484d;">Assigner</label> <div class="input-group"> <select class="form-control kt-selectpicker" required name="truck_assigner"> <option selected="" disabled>❗</option> @foreach ($truck_assigners as $truck_assigner) <option> {{ $truck_assigner->staffs->name }}</option> @endforeach </select> </div> </div> </div> @endforeachy jQuery
function getOrderFields() { if ($(".truck_type :selected").val() == '2') { $('.assigner_div').show(); } if ($(".truck_type :selected").val() == '1') { $('.assigner_div').hide(); } }Este código oculta y muestra los campos, pero el problema es que estoy usando clases, por lo que Todos los elementos en el ciclo foreach tienen la misma clase y oculta/muestra todos los campos. Por ejemplo: tengo dos claves en la matriz dadas al bucle foreach. Así que cambio el campo en la tecla 0 del bucle, oculta div en ambas teclas, que es la segunda tecla. Necesito ocultar/mostrar campos para el pedido seleccionado, no todos. ¿Cuál es la solución a este problema?
Consideraría cambiar el controlador de eventos para que se configure usando jQuery en lugar de usar el atributo onchange. Luego, puede combinar los métodos DOM Traversal con el selector $(this) para hacer lo que está buscando. Ejemplo aproximado:
$(document).on('change', 'select.truck_type', function(){ var val = $(this).val(), assigner = $(this).parents('.row').children('.assigner_div'); assigner.toggle(val === '2'); });En este ejemplo, usamos los métodos padres e hijos . Sin embargo, hay muchos métodos diferentes que podrían usarse. Por ejemplo, el siguiente método:
$(document).on('change', 'select.truck_type', function(){ var val = $(this).val(), assigner = $(this).parents('.title-md').next(); assigner.toggle(val === '2'); });También están los métodos find , y los métodos más cercanos :
$(document).on('change', 'select.truck_type', function(){ var val = $(this).val(), assigner = $(this).closest('.row').find('.assigner_div'); assigner.toggle(val === '2'); });Puede usar la $key en el bucle foreach para realizar la tarea dada. Pase la $key a la función getOrderFields y cambie el nombre de la clase de acuerdo con la $key también. A continuación se muestran los segmentos de código modificados según su problema.
... <select class="form-control kt-selectpicker truck_type" required name="truck_type" onchange="getOrderFields({{ $key }})"> ... <div class="form-group col-lg-6 assigner_div_{{ $key }}"> ...en guión,
function getOrderFields(key) { if ($(".truck_type :selected").val() == '2') { $('.assigner_div_' + key).show(); } if ($(".truck_type :selected").val() == '1') { $('.assigner_div_' + key).hide(); } }