表单提交后如何保留select组件的选中选项

核心思路 #

提交GET请求后页面会刷新，要让Select保持选中状态，需要从URL的请求参数中获取提交的ObjectGUID值，然后动态给对应的option添加selected属性。同时注意：HTML不允许嵌套<form>标签，你当前代码里外层的<form>是无效的，必须移除。

修改步骤及代码 #

1. 移除外层嵌套的<form>标签，保留内部表单结构。
2. 删除默认提示选项的selected属性，避免和动态设置的选中状态冲突。
3. 对每个option，判断其value是否等于请求参数中的ObjectGUID，相等则添加selected属性。

修改后的完整代码：

<div class="row">
    <div class="col-8 w-25 custom-select">
        <form method="get" class="w-50 custom-select">
            <select name='ObjectGUID' class="form-select" id="select2">
                <option value="" disabled>Выберите объект:</option>
                {% for obj in objects %}
                    <option value="{{ obj.GUID }}" {% if request.args.get('ObjectGUID') == obj.GUID %}selected{% endif %}>{{ obj }}</option>
                {% endfor %}
                <option value="1" {% if request.args.get('ObjectGUID') == '1' %}selected{% endif %}>1</option>
                <option value="2" {% if request.args.get('ObjectGUID') == '2' %}selected{% endif %}>2</option>
            </select>
            <button type="submit" class="mb-3 ms-2 mt-3 btn btn-outline-primary w-50">Применить</button>
        </form>
    </div>
</div>

补充说明 #

• 这里用request.args.get('ObjectGUID')获取GET请求参数是Flask框架的写法（基于你使用Jinja2模板推测），如果是其他后端框架，替换成对应获取请求参数的方法即可。
• 默认提示选项设为disabled，确保用户无法选中它，仅在未提交任何值时显示。

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