es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Flask jinja2 recuperar el valor de una lista desplegable.

13 Jul, 2023 Programación

Estoy utilizando Flask con plantillas Jinja2, ¿cómo puedo obtener el valor de una caja de selección usando Jinja2 o JavaScript + variable de Jinja2 y utilizarlo?

Lado de Python:

@app.route('/')
def dependent():
    fruits= {'apple':100,'orange':80,'mango':200}
    return render_template('select.html',fruits=fruits)

Lado de HTML+Jinja2

<form>
    <select name="fruit" id="fruit">
        {% for fruit in fruits.keys() %}
            <option value="{{ fruit }}"> {{ fruit }} </option>
        {% endfor %}
    </select>
    <p>{{ fruits[fruit] }}</p>
</form>

Me gustaría mostrar el precio de la fruta seleccionada junto a la selección, pero no puedo obtener el valor seleccionado y utilizarlo. Sé que la etiqueta “ final es incorrecta. ¿Cómo hacer esto correctamente?

PD: No sé nada sobre JS, jQuery y Ajax.

Actualización:

<script>
    var selectTag = document.getElementById('fruit');
    var pTag = document.getElementById('fruit-binding');
    selectTag.onchange = function () {
        pTag.innerText = fruits[selectTag.value];
    }
</script>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para recuperar y mostrar el valor de una caja de selección en Flask utilizando plantillas Jinja2, puedes agregar una función de escucha de eventos a la caja de selección usando Javascript.

    En la plantilla HTML, agrega un ID a la etiqueta p que mostrará el precio de la fruta seleccionada, y crea una función de Javascript que recupera el valor seleccionado de la caja de selección y muestra el precio correspondiente en la etiqueta p.

    Aquí tienes un fragmento de código actualizado que debería funcionar:

    <form>
    <select name="fruit" id="fruit">
        {% for fruit in fruits.keys() %}
            <option value="{{ fruit }}">{{ fruit }}</option>
        {% endfor %}
    </select>

    Precio de la fruta: <span id="fruit-price"></span>
</form>

<script>
    var selectTag = document.getElementById('fruit');
    var pTag = document.getElementById('fruit-price');
    var fruits = {{ fruits|tojson }};

    selectTag.addEventListener('change', function() {
        var fruit = selectTag.value;
        var price = fruits[fruit];
        pTag.innerText = price;
    });
</script>

    Explicación:

    • El código Javascript define las variables selectTag y pTag para hacer referencia a las etiquetas select y p en la plantilla HTML.
    • El diccionario fruits se convierte en un objeto JSON utilizando el filtro tojson proporcionado por Jinja2, y se asigna a una variable de Javascript para usarlo en la función de escucha de eventos.
    • La función de escucha de eventos se agrega al selectTag utilizando el método addEventListener. Escucha el evento “change”, que se dispara cuando el usuario selecciona una opción diferente en la caja de selección.
    • Cuando ocurre el evento, la función recupera el valor seleccionado de la caja de selección (fruit), busca su precio en el diccionario fruits (price) y establece el texto de la pTag para mostrar el precio.

Comments are closed.