3

Tengo este problema y espero me puedan ayudar. Tengo un select input dentro de un foreach en Laravel. La cosa es que en el input visible está la informacion para mostrar al usuario (nombre) y el ID para recuperarlo en el controlador e hice otro pero de tipo hidden para recuperar el precio del producto seleccionado (pagina de inventario). Tengo ya un codigo pero no me saca lo que necesito.

SCRIPT

$(document).ready(function(){
  $(document).on('change', '#tamano', function(event) {    
    var x = $("[name='precio']").val(); //ESTE es el que necesito recuperar (input hidden)

    var s = $(this).find('select option:selected').val(); //aqui recibo el input visible
    alert(s);
  });
});

Quiero hacer algo como asi pero no logro encontrar como se hace:

 var x = $("[name='precio': selected]").val();

FORMULARIO

      <select class="browser-default custom-select" name="tamano" id="tamano">
        <option value="">Seleccione</option>
        @foreach ($tamanos as $tamano)
          <option value="{{ $tamano->id }}">{{ $tamano->nombre }}</option>
          <option value="{{ $tamano->precio }}" name="precio" id="precio" hidden>{{ $tamano->precio }}</option> //este valor necesito recuperar
        @endforeach
        <input id="precioPan" type="hidden" >
      </select>

1 respuesta 1

3

Saludos te sugiero cambiar tu lógica un poco en tu dropdown/select, primero que nada te sugiero usar el atributo data un ejemplo de uso seria:

data-precio = "mi_valor"

este atributo se puede colocar donde desees en este caso en cada option de la siguiente manera:

 <select class="browser-default custom-select" name="tamano" id="tamano">
        <option value="">Seleccione</option>
        @foreach ($tamanos as $tamano)
          <option value="{{ $tamano->id }}" data-precio="{{$tamano->precio}}">{{ $tamano->nombre }}</option>
        @endforeach
        <input id="precioPan" type="hidden" >
 </select>

Finalmente podrías tener algo así:

$("#tamano").change(function(event){
valor = this.value;
precio = $('option:selected', this).data('precio');
alert('Precio: '+precio);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="browser-default custom-select" name="tamano" id="tamano">
  <option value="" selected disabled>Seleccione</option>
  <option value="1" data-precio="10">Prod-1</option>
  <option value="2" data-precio="15">Prod-2</option>
  <option value="3" data-precio="20">Prod-3</option>
 </select>

Si te fijas uso Jquery con data obtengo el valor del option seleccionado. con esto me evito usar otros campos ocultos.

Espero te sirva y suerte..!!

1
  • 1
    Amigo muchas gracias. No tenía idea de ese atributo "data" cada día se aprende algo nuevo. De nuevo gracias!! Me sirvió Commented el 25 jul. 2019 a las 16:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.