使用Flask从多种选择形式保存数据

Question

我正在使用网站的“更新帐户”功能，用户可以在其中更新其信息。我在后端使用Flask和Flask-SQLAlchemy。

我将提供一个简化的示例。

所需信息之一是用户拥有的物品的列表。向用户显示两个下拉菜单，一个 brand 下拉菜单和一个 model 下拉菜单。型号下拉菜单响应品牌下拉菜单（即：仅显示所选品牌的模型）；这是由jQuery函数驱动的，该函数获取存储在数据库中的数据。

表单的代码：

<h5 class="card-title">Products You Have</h5>
<div id="owned-products">
    {% for (brand, model) in user_products %}
        <p>{{ brand }} -- {{ model }}</p>
    {% endfor %}
</div>
<form name="PickProduct" action="" method='POST'>
    {{ form.hidden_tag() }}
    {{ form.brand.label }}
    <br>
    {{ form.brand }}
    <br>
    {{ form.model.label }}
    <br>
    {{ form.model }}
    <br>
    {{ form.submit }}
</form>

我正在努力弄清楚如何保存所选信息。我希望用户能够选择一种产品（品牌+型号），单击“添加”按钮以创建一个显示自己添加的内容的<p>元素，最后单击“保存”按钮，将更改提交到数据库。

此外，我需要一个“删除”按钮，但稍后我会担心的。

我尝试过的事情

使用JS / jQuery创建<p>元素很容易，但是您可能知道，您无法通过Jinja模板引擎将数据从JS传递到Flask。例如：

function addOption(brand, model) {
    {{ selected_products.append((brand, model)) }}  // will not work
    jQuery('<p>', {
        text: brand + ' -- ' + model
    }).appendTo('#owned-products');
}

$("#AddButton").click(function () {
    addOption(dropdown.brand.val(), dropdown.model.val());
});