Flask项目中Select标签内Option无法正常显示问题求助

问题描述 #

我正在开发一个杂货清单应用，尝试把数据库中的内容以<option>标签的形式展示在<select>标签里，但内容始终以段落形式显示。我试过重写全部代码、重新安装Flask甚至重装Python，都没能解决问题，希望有人能帮忙排查，让我能继续开发和学习Flask。

现有代码 #

后端Flask代码 #

import sqlite3
import random
from flask import Flask, session, render_template, request, g

app = Flask(__name__)
app.secret_key = 'RYO1s6LXzR'

@app.route('/')
def index():
    data = get_db()
    return render_template('index.html', all_data=data)

@app.route('/add_items', methods=["post"])
def add_items():
    return request.form["select_items"]

def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        db = g._database = sqlite3.connect('grocery_list.db')
        cursor = db.cursor()
        cursor.execute('SELECT name FROM groceries')
        all_data = cursor.fetchall()
        all_data = [str(val[0]) for val in all_data]
    return all_data

@app.teardown_appcontext
def close_connection(exception):
    db = getattr(g, '_database', None)
    if db is not None:
        db.close()

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

前端模板（index.html） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grocery List</title>
</head>
<body>
    <div id="add_item">
        <form action="/add_items" method="post">
            <select name="select_items">
                {% for item in all_data %}
                <option value="{{ item }}">{{ item }}</option>
                {% endfor %}
            </select>

            <input type="submit" value="ADD ITEM">
        </form>
    </div>
</body>
</html>

数据库初始化代码 #

import sqlite3

groceries = [
    "apples",
    "bananas",
    "clemintines",
    "dill",
    "eggs",
    "flavour",
    "grandola",
    "honey",
    "ice cream",
    "juice",
    "ketchup",
    "lemon",
    "margarine",
    "onion",
    "potatoes",
    "rosmary",
    "salt",
    "thyme",
    "vinegar",
    "watermelon",
    "pears",
    "cucumbers",
    "garlic",
    "carrots",
    "pastries",
    "eggplants",
    "milk",
    "coffee",
    "tea",
    "rice",
    "noodles",
    "lentils",
    "sweet potatoes",
    "strawberries",
    "cranberries",
    "mangos",
    "pappers",
    "zuccinis",
    "lime",
    "broth",
    "mushrooms",
    "chicken",
    "beef",
    "pork",
    "fish",
    "cream",
    "paprika",
    "tumeric",
    "cinnamon",
    "pumpkin",
    "basil",
    "tomatoes",
    "bread",
    "cake",
    "chocolate",
    "gum",
    "pineapple",
    "oranges",
    "lettuce",
    "cheese",
    "cilantro"
]

groceries = sorted(groceries)

connection = sqlite3.connect('grocery_list.db')
cursor = connection.cursor()

cursor.execute('create table groceries (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)')
for i in range(len(groceries)):
    cursor.execute('insert into groceries (name) values (?)', [groceries[i]])
    print('added '+groceries[i])

connection.commit()
connection.close()

问题排查与修复方案 #

1. 修正数据库初始化的语法错误 #

你的数据库初始化代码中，创建表的SQL语句缺少闭合括号：
原错误语句：

create table groceries (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT

修正后：

create table groceries (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)

这个错误会导致表创建失败，或者数据插入异常，先运行修正后的初始化脚本，确保数据库表和数据正确生成。

2. 验证模板文件位置 #

Flask默认从应用根目录下的templates文件夹加载模板，确认你的index.html放在这个文件夹里，否则Flask会返回原始模板代码，浏览器会把模板标签当成普通文本渲染，看起来像段落格式。

3. 检查数据是否正确传递 #

在index路由中添加打印语句，确认数据库查询到的数据是正确的字符串列表：

@app.route('/')
def index():
    data = get_db()
    print(data)  # 查看控制台输出的内容是否为预期的杂货名称列表
    return render_template('index.html', all_data=data)

如果控制台输出为空或格式错误，说明数据库查询有问题，需要检查表是否存在、数据是否正确插入。

4. 查看页面渲染后的源代码 #

打开浏览器开发者工具（F12），查看页面的HTML源代码，确认<select>标签内是否正确生成了<option>元素。如果源代码里还是模板语法（比如{% for ... %}），说明模板没有被正确渲染，需要检查Flask应用的模板配置或文件路径。

5. 重启Flask应用 #

调试模式下Flask会自动重载代码，但如果之前有缓存问题，手动重启应用确保最新代码生效。

内容的提问来源于stack exchange，提问作者TheFutureCoder