如何为Flask下拉选择框应用Bootstrap下拉按钮样式？

方法1：直接改造原生<select>（快速适配） #

Bootstrap提供了form-select类可直接美化原生下拉选择框，搭配尺寸类（比如form-select-sm对应你提供的小按钮尺寸）就能和Bootstrap按钮风格统一，同时给提交按钮也加上Bootstrap按钮类：

<form name="Item_1" action="/combobox" method="POST">
    <!-- 给select添加Bootstrap的form-select类 -->
    <select name="colours" class="form-select form-select-sm">
      {% for colour in colours %}
        {% if colour == chosen %}
         <option value="{{ colour }}" selected>{{ colour }}</option>
        {% else %}
         <option value="{{ colour }}">{{ colour }}</option>
        {% endif %}     
      {% endfor %}     
   </select>
   <!-- 给提交按钮添加Bootstrap按钮类 -->
   <input type="submit" class="btn btn-secondary btn-sm mt-2">
</form>

方法2：做成按钮式下拉菜单（完全匹配Bootstrap下拉按钮样式） #

如果想要完全实现你提供的按钮式下拉效果，需要用Bootstrap的Dropdown组件，同时通过JavaScript关联表单提交逻辑：

<form name="Item_1" action="/combobox" method="POST">
  <!-- 隐藏输入框用于传递选中的颜色值 -->
  <input type="hidden" name="colours" id="selected-colour">
  
  <!-- Bootstrap下拉按钮结构 -->
  <div class="dropdown">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="colour-dropdown" data-bs-toggle="dropdown" aria-expanded="false">
      {{ chosen or '选择颜色' }} <!-- 默认显示选中项或提示文本 -->
    </button>
    <ul class="dropdown-menu" aria-labelledby="colour-dropdown">
      {% for colour in colours %}
        <li>
          <a class="dropdown-item" href="#" data-colour="{{ colour }}">{{ colour }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
  
  <!-- 提交按钮 -->
  <input type="submit" class="btn btn-secondary btn-sm mt-2">
</form>

<!-- JavaScript处理下拉选项点击事件 -->
<script>
  document.querySelectorAll('.dropdown-item').forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();
      // 设置隐藏输入框的值
      document.getElementById('selected-colour').value = this.dataset.colour;
      // 更新下拉按钮的显示文本
      document.getElementById('colour-dropdown').textContent = this.textContent;
    });
  });
</script>

注意事项 #

• 确保页面已经引入Bootstrap的CSS和JavaScript（如果使用Bootstrap 5，需用data-bs-toggle代替旧版的data-toggle）
• 方法2通过隐藏输入框传递选中值，保证表单提交时能正常将颜色值发送到后端

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