Jinja2：Flask视图返回列表移除括号与单引号显示求助

嘿，我之前也碰到过一模一样的问题！这大概率是因为你把列表直接以字符串形式传给前端了，导致Bootstrap下拉框把整个列表字符串当成了单个选项。给你几个靠谱的解决思路：

1. 后端用Jinja2模板循环渲染（最常用的规范做法） #

如果是用Flask自带的模板引擎渲染页面，直接把列表传到模板里，然后用循环逐个生成下拉选项就好：

Flask视图代码 #

from flask import render_template

@app.route('/your-page')
def your_page():
    # 这是你要展示的选项列表
    dropdown_options = ['首页', '个人中心', '设置']
    # 把列表传给模板
    return render_template('your-template.html', options=dropdown_options)

前端模板（Bootstrap下拉框部分） #

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    请选择
  </button>
  <ul class="dropdown-menu">
    <!-- 用Jinja2循环遍历列表，生成每个选项 -->
    {% for opt in options %}
      <li><a class="dropdown-item" href="#">{{ opt }}</a></li>
    {% endfor %}
  </ul>
</div>

这样渲染出来的每个选项都是单独的条目，完全不会带括号和单引号。

2. 接口返回JSON，前端JS动态生成 #

如果是用AJAX异步获取选项数据，后端要返回JSON格式的数组，而不是字符串：

Flask接口代码 #

from flask import jsonify

@app.route('/api/get-options')
def get_options():
    options = ['文章管理', '评论管理', '用户管理']
    # 返回JSON数组，前端拿到的就是纯数组
    return jsonify(options)

前端JS代码 #

// 发起请求获取选项
fetch('/api/get-options')
  .then(res => res.json())
  .then(options => {
    const dropdownMenu = document.querySelector('.dropdown-menu');
    // 循环数组生成每个选项
    options.forEach(opt => {
      const li = document.createElement('li');
      const link = document.createElement('a');
      link.className = 'dropdown-item';
      link.href = '#';
      link.textContent = opt;
      li.appendChild(link);
      dropdownMenu.appendChild(li);
    });
  });

3. 应急方案：前端手动清理字符串（不推荐，仅临时用） #

如果实在没法修改后端，只能拿到带括号引号的字符串，那可以在前端手动处理成数组：

// 假设你拿到的字符串是这样的："['选项A','选项B','选项C']"
const rawString = "['选项A','选项B','选项C']";
// 去除首尾的括号，按单引号分割，再清理残留的引号
const cleanOptions = rawString.slice(1, -1).split("','").map(item => item.replace(/'/g, ''));
// 之后再用cleanOptions生成下拉选项就好

不过这种方法是下策，尽量优先用前两种规范的方式，避免后续维护麻烦。

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