javascript - 在传递到 Flask 应用程序之前编辑表单数据

Question

我有以下由 flask 应用程序呈现的多重选择表单:

<form method="POST" action="">
    <label for="sports">Sports:</label>
    <select id="sports" name="sports" multiple>
        <option value="Basketball">Basketball</option>
        <option value="Football">Football</option>
        <option value="Baseball">Baseball</option>
        <option value="Golf">Golf</option>
        <option value="Soccer">Soccer</option>
    </select>
    <input type="submit" name="send" onclick="var selected_sports = project.getSelectedValues(document.querySelector('#sports'));">
</form>

我正在尝试将数据以列表的形式发送到服务器/python代码。

例如，如果您选择篮球、足球和高尔夫，则列表将为 ["篮球"、"足球"、"高尔夫"]；如果您仅选择足球，则列表将为 >[“足球”]。

我可以使用 javascript 创建列表(代码如下)，但我不确定如何将此创建的列表传递到服务器(服务器仅接收第一个选定的选项)。

用于创建所选值列表的 JS 代码(单击提交按钮时以 HTML 表单调用):

project = {};

project.getSelectedValues = function (selectTag) {
    var result = [];
    var options = selectTag && selectTag.options;

    for (var = 0; i < options.length; i++) {
        if (options[i].selected) {
            result.push(options[i].value || options[i].text);
        }
    }
    return result;
}

Answer 1

the server is receiving only the first selected option

您可以提交<select id="sports" name="sports" multiple>通常(不使用 JS 创建列表)并使用 getlist()

引用 python 代码中的所有选定选项

sports = request.form.getlist('sports')