web-dev-qa-db-fra.com

Comment créer un menu déroulant à partir de la liste python en utilisant Flask et HTML

J'essaie de créer un menu déroulant en HTML en utilisant les informations d'un script python. Je l'ai fait fonctionner jusqu'à présent, cependant, le menu déroulant html affiche les 4 valeurs dans les listes comme 4 options.

Courant: Option 1: Rouge, bleu, noir orange; Option 2: Rouge, bleu, noir, orange etc. (Capture d'écran dans le lien) Actuel

Souhaité: Option 1: Rouge Option 2: Bleu etc.

Comment puis-je faire en sorte que la liste python soit séparée?

dropdown.py

from flask import Flask, render_template, request
app = Flask(__name__)
app.debug = True


@app.route('/', methods=['GET'])
def dropdown():
    colours = ['Red', 'Blue', 'Black', 'Orange']
    return render_template('test.html', colours=colours)

if __name__ == "__main__":
    app.run()

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown</title>
</head>
<body>
<select name= colours method="GET" action="/">
    {% for colour in colours %}
    <option value= "{{colour}}" SELECTED>{{colours}}</option>"
    {% endfor %}
</select>

</select>
</body>
</html>
pythonhtmlflask
18
DeeChok

vous avez une faute de frappe, remplacez colours par colour

<option value= "{{colour}}" SELECTED>{{colours}}</option>"

remplacer pour

<option value= "{{colour}}" SELECTED>{{ colour }}</option>"
                                     <!--  ^^^^ -->
9
Bear Brown

Vous devez utiliser {{colour}} aux deux endroits (au lieu de {{colours}} à la seconde place):

<select name="colour" method="GET" action="/">
    {% for colour in colours %}
        <option value="{{colour}}" SELECTED>{{colour}}</option>"
    {% endfor %}
</select>

Notez que l'utilisation de selected dans la boucle ajoutera l'attribut selected à toutes les options et la dernière sera sélectionnée, ce que vous devez faire est le suivant:

<select name="colour" method="GET" action="/">
  <option value="{{colours[0]}}" selected>{{colours[0]}}</option>
  {% for colour in colours[1:] %}
    <option value="{{colour}}">{{colour}}</option>
  {% endfor %}
</select>
18
ettanany