4

Lo que necesito es pasar el precio al input que esta almacenado en un atributo data, ya que viene la info de una base de datos.

Tengo el siguiente código:

<select asp-for="Venta.CodProducto" class="form-control" id="codpro">

    <option>Seleccione una opcion</option>
            @foreach (var producto in Model.Productos)
            {
                <option value="@producto.CodProducto" data-precio="@producto.Precio">
                    @producto.Nombres @producto.Descripcion
                </option>
            }
</select>

<label class="control-label">Precio</label>
<input class="form-control" type="number"id="ValorPro"/>



<script>

let opcion = $('#codpro option:selected');

$('#opcion').on('change', function () {
    let precio = $(opcion).attr('data-precio');
    $('#ValorPro').val(precio);
});


</script>
1
  • Hola Vanesa, como recomendación te diría que elijas una convención para los nombres y te apegues a esta. Esto te va a ahorrar dolores de cabeza por errores de tipeo.
    – Marcos
    Commented el 25 abr. 2023 a las 14:26

2 respuestas 2

2

Para obtener el precio del <option> seleccionado tenes que:

  • Suscribirte al evento change en el <select>
  • Cuando se ejecuta el evento, buscar el <option> seleccionado y de éste obtener el precio establecido en el atributo data.

Ejemplo:

// Suscribimos al evento "change" del <select>
$('#codpro').on('change', function() {

  // Obtenemos el <option> seleccionado
  let $option = $(this.selectedOptions[0]);

  // Pasamos el precio al <input>
  $('#ValorPro').val($option.data('precio'));
});
2
  • Muchas gracias :) Commented el 25 abr. 2023 a las 14:35
  • @VanesaAcevedo, un gusto poder ayudarte. Si alguna de las respuestas que recibiste ayudo a resolver tu pregunta, considera votarla y/o marcarla como aceptada.
    – Marcos
    Commented el 25 abr. 2023 a las 14:38
0

Debes acceder a #codpro, que es el <select>. El evento será escuchado cuando ocurre el change en el <select>, es decir, cuando seleccionamos una opción:

$('#codpro').on('change', function () {
  // ...
}

Luego ingresamos a la opción que seleccionamos:

$('#codpro').on('change', function () {
  let opcion = $('#codpro option:selected');
}

Y de esa opción, al atributo data-precio:

$('#codpro').on('change', function () {
  let opcion = $('#codpro option:selected');
  let precio = $(opcion).attr('data-precio');
}

Y por último, asignas ese valor del atributo a #ValorPro, quedando el código así:

$('#codpro').on('change', function () {
  let opcion = $('#codpro option:selected');
  let precio = $(opcion).attr('data-precio');
  $('#ValorPro').val(precio);
});

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.