求助：如何在Flask中实现下拉选单项点击跳转页面

你遇到的问题核心是前后端代码混淆：Flask的redirect()是后端视图函数中用来返回重定向响应的方法，不能直接写到前端HTML的onclick属性里——前端JavaScript环境根本不认识这个后端函数，所以才会报"redirect未定义"的错误。

下面给出两种可行的解决方案：

方法一：直接给选项添加JS跳转（简单快速） #

修改"--Add place--"对应的<option>标签，用前端JavaScript的window.location.href实现跳转：

<option value="" onclick="window.location.href='/add_place'">--Add place--</option>

把/add_place替换成你实际的添加地点页面路由即可。

方法二：监听select的change事件（兼容性更好） #

部分浏览器对<option>的onclick支持不佳，更可靠的方式是给整个下拉框添加onchange事件，判断选中项后跳转：

1. 修改<select>标签，添加事件监听：

<select class="form-select" name="place" onchange="handlePlaceSelect(this)">

2. 在模板的{% block main %}末尾添加JavaScript代码：

<script>
function handlePlaceSelect(selectElement) {
    const selectedText = selectElement.options[selectElement.selectedIndex].text;
    if (selectedText === "--Add place--") {
        window.location.href = '/add_place';
    }
}
</script>

修改后的完整模板代码 #

{% extends "layout.html" %}

{% block title %}
    记录跑步
{% endblock %}

{% block main %}
    <div class="container d-flex justify-content-center pt-3">
        <form action="/login" method="post">
            <label for="place">地点</label>
            <select class="form-select" name="place" onchange="handlePlaceSelect(this)">
                <option selected value="">--选择地点--</option>
                {% if places %}
                    {% for place in places %}
                        <option value="{{ place }}">{{ place.name }}</option>
                    {% endfor %}
                {% endif %}
                <option value="">--添加地点--</option>
            </select>
            <hr>
            <div class="mb-3">
                <label for="distance">跑步距离（公里）</label>
                <input autocomplete="off" autofocus class="form-control mx-auto w-auto" name="distance" placeholder="例如：1.234" type="number" min=".001" step=".001">
            </div>
            <div class="mb-3">
                <hr>
                <span>时间</span>
                <hr>
                <label for="hours">小时</label>
                <input class="form-control mx-auto w-auto" name="hours" placeholder="00" defaultValue="0" type="number" max="99" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <label for="minutes">分钟</label>
                <input class="form-control mx-auto w-auto" name="minutes" placeholder="00" type="number" defaultValue="0" max="59" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <label for="seconds">秒</label>
                <input class="form-control mx-auto w-auto" name="seconds" placeholder="00" type="number" defaultValue="0" max="59" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <hr>
            </div>
            <button class="btn btn-primary" type="submit">提交</button>
        </form>
        <script>
        function handlePlaceSelect(selectElement) {
            const selectedText = selectElement.options[selectElement.selectedIndex].text;
            if (selectedText === "--添加地点--") {
                window.location.href = '/add_place';
            }
        }
        </script>
    </div>
{% endblock %}

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