How to create dropdown menu from python list using Flask and HTML

Question

I'm trying to create a dropdown menu in HTML using info from a python script. I've gotten it to work thus far, however, the html dropdown displays all 4 values in the lists as 4 options.

Current: Option 1: Red, Blue, Black Orange; Option 2: Red, Blue, Black, Orange etc. (Screenshot in link) Current

Desired: Option 1: Red Option 2: Blue etc.

How do I make it so that the python list is separated?

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>

</body>
</html>

ettanany · Accepted Answer · 2017-08-25 08:29:36Z

32

You need to use {{colour}} in both places (instead of {{colours}} in the second place):

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

Note that using selected inside the loop will add selected attribute to all options and the last one will be selected, what you need to do is the following:

<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>

edited Aug 25, 2017 at 8:29

answered Aug 25, 2017 at 8:16

ettanany

20k9 gold badges49 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user8060120 · Accepted Answer · 2017-08-25 08:16:24Z

25

you have a typo, replace colours to colour

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

replace to

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

answered Aug 25, 2017 at 8:16

user8060120

Collectives™ on Stack Overflow

How to create dropdown menu from python list using Flask and HTML

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related