如何在Flask中实现带清空按钮的多选下拉框？

问题原因 #

WTForms的SelectMultipleField默认渲染原生HTML的<select multiple>元素，这类元素本身是展开显示所有选项的，不具备下拉折叠和清空按钮功能，所以需要借助前端UI组件实现预期效果。

实现步骤 #

1. 修正后端WTForms代码 #

先补全你代码的语法错误，同时注意default只需传入选项的value值：

type = SelectMultipleField("Type", 
                          choices=[("None", "None"), ("one", "one"), ("two", "two"), ("three", "three")], 
                          default=["None"])

2. 引入前端组件（以Select2为例） #

在模板文件中引入Select2的资源并初始化组件，实现下拉折叠和清空功能：

模板代码示例：

<!DOCTYPE html>
<html>
<head>
    <!-- 引入Select2样式文件 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- 引入jQuery（Select2依赖） -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入Select2脚本文件 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
    <form method="POST">
        {{ form.hidden_tag() }}
        <!-- 给字段添加自定义类，方便后续初始化 -->
        {{ form.type(class="multi-select") }}
        <button type="submit">提交</button>
    </form>

    <script>
        $(document).ready(function() {
            $('.multi-select').select2({
                placeholder: "选择类型",
                allowClear: true, // 启用清空按钮
                multiple: true // 开启多选模式
            });
        });
    </script>
</body>
</html>

3. 关键配置说明 #

• allowClear: true：开启后，选中选项时会显示清空按钮，点击可一键清空所有选择
• placeholder：设置下拉框的提示文本，优化用户体验
• 自定义类multi-select用于定位元素，避免影响页面其他控件

效果说明 #

完成上述配置后，页面会渲染出带下拉折叠、多选功能和清空按钮的下拉框，与你预期的效果一致。

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