Flask WTF SelectField从MySQL填充选项后页面显示格式异常

问题根因 #

异常完全来自后端传给SelectField的选项格式不符合WTForms的强制要求，和前端模板渲染逻辑、CSRF配置无关：

• 从MySQL查询拿到的结果是嵌套单元素元组的序列，比如样例中的(('',), ('ABC',), ('qw',))，每个内层元组仅存储了业务值，没有拆分出选项提交值、页面展示文本两个独立部分
• SelectField的choices属性必须接收由二元元组组成的可迭代序列，每个二元元组固定为提交值、展示文本的成对结构，WTForms渲染下拉框时会严格按照这个结构拆分内容生成<option>标签
• 直接把单元素元组的原始查询结果赋值给choices时，渲染逻辑会把整个单元素元组直接塞进option的文本内容，最终出现带括号、逗号的格式异常。

修复步骤 #

1. 对数据库返回的原始结果做格式转换，匹配SelectField的入参要求
   示例转换代码：

   # 视图中拿到的原始查询结果，即之前打印的嵌套单元素元组结构
   raw_db_results = cursor.fetchall()
   # 逐行转换为符合要求的二元元组列表，因业务值本身就是要展示的文本，两个位置取同一个值即可
   select_options = [
       (item[0], item[0])
       for item in raw_db_results
   ]
   

2. 表单实例化后，把转换好的选项赋值给对应字段

   # 实例化表单
   form = vendorForm()
   # 给vendorCompany字段填充格式合规的选项
   form.vendorCompany.choices = select_options
   # 按照完全相同的逻辑处理另外两个SelectField字段（vendorName、sopName），避免出现同类型格式问题
   # form.vendorName.choices = 转换后的对应选项列表
   # form.sopName.choices = 转换后的对应选项列表
   

3. 优化注意事项
   • 如果需要默认的引导选项，可在选项列表开头手动插入占位项，比如select_options.insert(0, ('', '-- 请选择供应商所属公司 --'))
   • 可直接使用已经初始化好的SQLAlchemy ORM做去重查询替代原生游标调用，查询返回的结果结构和原生查询一致，直接套用上述转换逻辑即可，示例：History.query.with_entities(History.vendorCompany).distinct().all()
   • 动态获取的选项不要硬编码写在Form类的字段定义中，必须在视图层完成表单实例化后，再把选项赋值给对应字段的choices属性，否则会触发WTForms的缓存机制导致选项不随数据库值更新。

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