如何从 HTML 表单动态填充的下拉列表中预 select 特定值？

Question

我有三个具有相同选项的下拉列表，所有这些都是从数据库中填充的并且工作正常。我想实现一个 'smart mapping' 功能，其中三个字段是根据条件预 selected 的。目前，pre-selected 选项是下拉列表的第一个值（即 Container ID）。我希望预 selected 选项是特定值，而不是如所附图片所示。

当前 selected 值：

所需的预 select 值

动态下拉列表选项

Python代码（烧瓶）

# db_col is the list of the three labels of the HTML form
db_col = ['Container ID', 'Container Type', 'Date of Manufacture']

# df_list is the list of the six options available in the dropdown list
df_list = ['Container ID', 'Container Type', 'Unit', 'Year of Manufacture', 'Date of Manufacture', 'Age']

# smart_mapping is the list of the three pre-selected options for the label in order
smart_mapping = ['Container ID', 'Container Type', 'Date of Manufacture'] 

# smart_mapping_dict is the dictionary of the labels as keys and pre-selected options as values
smart_mapping_dict = {'Container ID': 'Container ID', 'Container Type': 'Container Type', 'Date of Manufacture': 'Date of Manufacture'}

HTML 表单（Jinja 模板）

<form class="uploadDataForm" action="/mapping2/{{ id }}" method = "POST">

{% for fetchcol in db_col %}

    <label for="{{ fetchcol }}">{{ fetchcol }}</label>
    <select class="form-select" name="{{ fetchcol }}" id="fetchcol{{ loop.index }}" onclick="changeColumnCol{{ loop.index }}(this.value)" >

        {% for ex_col in df_list %}
            <option value="{{ ex_col }}">{{ ex_col }}</option>
        {% endfor %}

    </select>
    <br>
    {% endfor %}

    <div class="text-center">
        <a href="/second_page/{{ id }}" class="btn btn-danger">Discard Data Tape</a>
        <button class="btn btn-default nextBtn text-center ">Next</button>
    </div>

</form>

我试图搜索类似的问题和答案，但它们需要使用 javascript and/or php 方法，这两种方法我都不熟悉，因此无法使用适应我的问题。如何让我的 HTML 表单预先 select 所需的选项，如图 2 所示？

编辑：所需的选项通常与标签名称不同，即 'Date of Manufacture' 标签可以对应于 'Age' 选项，而不是智能映射功能。

Answer 1

您可以使用 Jinja 的 if 语句来做到这一点。基本上，我们检查当前选项是否等于 smart_mapping_dict 中的相应值。如果是这样，我们将selected属性添加到HTML <option>标签中，以pre-select它。

<form class="uploadDataForm" action="/mapping2/{{ id }}" method = "POST">

{% for fetchcol in db_col %}

    <label for="{{ fetchcol }}">{{ fetchcol }}</label>
    <select class="form-select" name="{{ fetchcol }}" id="fetchcol{{ loop.index }}" onclick="changeColumnCol{{ loop.index }}(this.value)" >

        {% for ex_col in df_list %}
            {% if ex_col == smart_mapping_dict[fetchcol] %}
                <option value="{{ ex_col }}" selected>{{ ex_col }}</option>
            {% else %}
                <option value="{{ ex_col }}">{{ ex_col }}</option>
            {% endif %}
        {% endfor %}

    </select>
    <br>
    {% endfor %}

    <div class="text-center">
        <a href="/second_page/{{ id }}" class="btn btn-danger">Discard Data Tape</a>
        <button class="btn btn-default nextBtn text-center ">Next</button>
    </div>

</form>

如何从 HTML 表单动态填充的下拉列表中预 select 特定值？

How do I pre-select specific values from a dynamically populated dropdown list for HTML form?

html

python

forms

jinja2

flask