如何使用Flask获取HTML select标签的选中值？附完整代码示例

核心错误点 #

1. HTML端错误 #

• body标签提前闭合，表单、下拉框等有效内容全部写在<body>外，属于严重的语法错误
• 下拉框所属的表单内没有提交按钮，页面最下方的提交按钮不属于任何表单，点击后不会触发任何提交动作
• <select>标签内部嵌套了多余的<ul>标签，不符合HTML语法规范，会导致下拉框取值异常
• 两个POST表单没有做区分，提交下拉框时不会携带上传的Excel文件，会触发后端报错
• 存在多处语法疏漏：<meta name="description" 缺少闭合尖括号，<title>标签多写了一个<符号

2. Flask端错误 #

• 使用全局变量headers_list存储表头，既会导致多用户访问时数据串扰，还会因为每次请求都清空headers_list，提交下拉框后头列表直接丢失
• 没有区分「上传文件」和「提交选中表头」两种POST请求，逻辑完全混杂，提交下拉框时因为没有文件字段，会直接进入No file selected分支，不会处理表头取值逻辑
• 直接用request.files["file"]读取文件，当POST请求不包含文件字段时会直接抛出KeyError异常

修复后代码 #

Flask代码 #

import flask
from flask import Flask, request, session
import pandas as pd

app = Flask(__name__)
# 配置session密钥，用来存储当前用户的表头，避免全局变量串数据
app.secret_key = 'your_custom_secret_key_here'

@app.route("/", methods=["GET", "POST"])
def index():
    headers_list = session.get('headers_list', [])
    selected_header = None
    if request.method == "POST":
        # 区分两种提交场景：上传文件 / 提交选中表头
        if 'file' in request.files:
            # 处理文件上传逻辑
            file = request.files["file"]
            if file.filename != '':
                df = pd.read_excel(file)
                headers_list = get_headers(df)
                # 把表头存在当前用户的session里，不会和其他用户串数据
                session['headers_list'] = headers_list
        elif 'header' in request.form:
            # 处理表头提交逻辑
            selected_header = request.form.get("header")
            print(f"选中的表头是：{selected_header}")
            # 这里可以加你后续的处理逻辑
    return flask.render_template("index.html", headers_list=headers_list, selected_header=selected_header)

def get_headers(dataframe):
    return list(dataframe.columns)

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

HTML代码（templates/index.html） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <title>Contra Tool</title>
</head>
<body>
    <h1>Contra Tool</h1>
    <p>Describe functionality</p>
    <br/>

    <!-- 上传文件的表单 -->
    <form action="" method="post" enctype="multipart/form-data">
        <label for="myfile">Select a file:</label>
        <input type="file" id="myfile" name="file">
        <input type="submit" value="Upload">
    </form>

    <br><br>
    
    <!-- 只有当有表头的时候才渲染下拉框 -->
    {% if headers_list %}
    <div class="dropdown">
        <!-- 提交表头的表单 -->
        <form action="" method="POST">
            <label for="header">选择要处理的表头：</label>
            <select id="header" name="header" class="dropdown-content">
                {% for h in headers_list %}
                <option value="{{h}}" {% if selected_header == h %}selected{% endif %}>{{h}}</option>
                {% endfor %}
            </select>
            <input type="submit" value="确认选择">
        </form>
    </div>
    {% endif %}
    
    {% if selected_header %}
    <p>你已选中表头：{{selected_header}}</p>
    {% endif %}
</body>
</html>

关键修改说明 #

• 用Flask的session存储当前用户的表头，替代全局变量，解决多用户串数据和请求后表头丢失的问题
• 后端区分两种POST场景，分别处理文件上传和表头提交逻辑
• 修正HTML所有语法错误，把所有内容放到body标签内
• 下拉框表单内添加提交按钮，点击后正常提交选中的表头值
• 增加判断逻辑，只有上传文件拿到表头之后才渲染下拉框，避免空列表报错

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