Flask表单实现动态新增下拉选择菜单的方法咨询

当然能实现这个需求啦！你要的是「用户每选一个评分，就自动新增一个同款下拉框让他继续选」的效果对吧？核心是用前端JavaScript监听下拉框的选择事件，动态生成新组件，后端Flask只需要负责初始页面渲染和最终接收所有选择的数据就行。下面给你一步步的实现方案：

首先在你的Flask HTML模板里，给初始的下拉框套一个容器，方便后续添加新组件：

<!-- 用来存放所有评分下拉框的容器 -->
<div id="ratings-container">
  <!-- 初始的下拉框，给它加个类名方便克隆 -->
  <select class="form-control rating-select" name="ratings[]">
    <option value="5">5</option>
    <option value="4">4</option>
    <option value="3" selected>3</option>
    <option value="2">2</option>
    <option value="1">1</option>
  </select>
</div>

然后添加一段JavaScript代码，监听下拉框的选择事件，每次用户选完就新增一个下拉框：

document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('ratings-container');
  // 克隆初始的下拉框作为模板，后续新增的都用这个模板
  const selectTemplate = document.querySelector('.rating-select').cloneNode(true);

  // 给容器添加事件委托，监听所有下拉框的change事件
  container.addEventListener('change', function(e) {
    if (e.target.classList.contains('rating-select')) {
      // 克隆模板，重置选中状态为默认的3
      const newSelect = selectTemplate.cloneNode(true);
      newSelect.querySelectorAll('option').forEach(opt => opt.removeAttribute('selected'));
      newSelect.querySelector('option[value="3"]').setAttribute('selected', 'selected');
      // 把新下拉框添加到容器里
      container.appendChild(newSelect);
    }
  });
});

前端把每个下拉框的name设为ratings[]，这样提交表单时，后端可以通过getlist方法获取所有选择的评分值：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def rating_form():
    if request.method == 'POST':
        # 获取用户所有选择的评分，返回一个列表
        user_ratings = request.form.getlist('ratings[]')
        # 这里可以根据需求处理数据，比如保存到数据库、计算平均值等
        print("用户提交的所有评分：", user_ratings)
    return render_template('rating_form.html')

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

• 限制新增数量：如果不想让用户无限添加，可以在JS里加个判断，比如当容器里的下拉框数量超过10个就不再新增：

  if (container.querySelectorAll('.rating-select').length >= 10) return;
  

• 样式优化：给每个下拉框加个底部间距，避免挤在一起：

  .rating-select {
    margin-bottom: 8px;
  }
  

• 数据验证：后端可以检查user_ratings里的每个值是否在1-5之间，防止非法数据提交。

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