如何通过Python与Flask获取Bootstrap下拉菜单的选中值？

我明白你现在遇到的困扰——Bootstrap下拉按钮能正常切换显示选中的颜色，但提交表单时后端始终拿不到这个值。这是因为默认的Bootstrap下拉菜单只是纯UI组件，没有和表单控件绑定，提交时不会把选中值封装到表单数据里。下面给你几个实用的解决方案：

方法一：添加隐藏输入框存储选中值 #

这是最直接的适配方案，我们给下拉组件搭配一个隐藏的<input>标签，每次选中下拉项时把值同步到这个输入框，表单提交时就能带上这个值了。

修改HTML代码： #

<!-- 确保这段代码在<form>标签内部 -->
<div class="dropdown">
    <div class="input-group-btn">
        <!-- 新增隐藏输入框，name和后端获取的键保持一致 -->
        <input type="hidden" name="color_dropdown" id="hiddenColorInput">
        <button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select Color <span class="caret"></span>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            {% for datum in data %}
            <a class="dropdown-item" href="#">{{ datum }}</a>
            {% endfor %}
        </div>
    </div>
</div>

更新JavaScript代码： #

在原来的点击事件里，增加同步隐藏输入框值的逻辑：

$(".dropdown-menu a").click(function(){
    const selectedColor = $(this).text();
    // 更新按钮显示文本
    $(this).parents(".input-group-btn").find('.btn').text(selectedColor);
    // 把选中值赋值给隐藏输入框
    $("#hiddenColorInput").val(selectedColor);
});

这样修改后，当你提交表单时，request.form.get("color_dropdown")就能正确获取到选中的颜色值了。

方法二：改用Bootstrap表单下拉组件（更规范） #

如果想更贴合表单的原生逻辑，可以直接用<select>标签搭配Bootstrap样式，这样不需要额外JS就能自动传递选中值：

修改HTML代码： #

<div class="form-group">
    <select class="form-control btn btn-info" name="color_dropdown" id="colorSelect">
        <option value="">Select Color</option>
        {% for datum in data %}
        <option value="{{ datum }}">{{ datum }}</option>
        {% endfor %}
    </select>
</div>

这种方式不需要额外JavaScript，<select>本身就是表单控件，提交时会自动把选中的value发送到后端，request.form.get("color_dropdown")直接就能拿到值。你可以通过CSS微调样式，让它和原来的按钮下拉外观保持一致。

额外优化建议 #

• 确保下拉组件在<form>标签内部，否则表单提交时不会包含这个控件的数据。
• 如果你想更贴合Flask-WTF的使用规范，可以在表单类里添加对应字段：
  修改forms.py：

  class IndexForm(FlaskForm):
      car = StringField('Car', validators=[DataRequired()])
      color_dropdown = StringField('Color')  # 新增颜色字段
      submit = SubmitField('Submit')
  

  然后在routes.py里直接通过表单对象获取值：

  posts = get_data(color=form.color_dropdown.data)
  

  这种方式能利用Flask-WTF的表单验证机制，减少手动处理request.form的出错概率。

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