Flask 在刷新时保持选择器的选项

Question

我正在寻找一种方法来在用户选择并刷新页面（GET 请求）或发送数据（POST 请求）后保留选中的 html 选择器选项。

真正有效的唯一方法是将 localstorage 与 JavaScript 结合使用，但它似乎不适用于 jinja（请参见下面的示例）：

  <select title='selector' id="interface-output" class="browser-default">
    <option id="select" value="select">Select an interface</option>
    {% for element in new_list %}
        <option value='{{ element }}'>{{ element }}</option>
    {% endfor %}

和javascript脚本：

  document.getElementById('interface-output').onchange = function() {
    localStorage.setItem('selectedtem', document.getElementById('interface-output').value);
  };

  if (localStorage.getItem('selectedtem')) {
    document.getElementById('interface-output').options[localStorage.getItem('selectedtem')].selected = true;
  }

它适用于固定选项，但不适用于像这里这样的动态 jinja2 选项。你还有其他方法让它工作吗？提前致谢！

Answer 1

您可以使用本地存储来使用 Jinja 2 动态选项来选择所选的选项值。

这里是一个在 Jinja 2 select 标签中使用本地存储的简单例子。

app.py

：

from flask import Flask, request, render_template, flash

app = Flask(__name__)
app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'


@app.route('/add', methods=['GET', 'POST'])
def add_product():
    options = ["Mobile", "Laptop", "Monitor"]
    if request.method == 'POST':
        product_name = request.form["product_name"]
        product_type = request.form["product_type"]
        flash(f'New product Added. Name: {product_name}, type: {product_type}')
    return render_template('dropdown.html', options=options)

templates/dropdown.html

：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selected dropdown example</title>
</head>
<body>
<h2>Add new product</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
    {% for message in messages %}
    <li>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
{% endwith %}
<form action="{{ url_for('add_product') }}"
      method="post"
      id="product_form">
    <label for="product_type">Product type:</label>
    <select name="product_type" id="product_type">
        {% for element in options %}
        <option value='{{ element }}'>{{ element }}</option>
        {% endfor %}
    </select>
    <br>
    <label for="product_name">Product name</label>
    <input type="text" name="product_name" id="product_name">
    <br>
    <input type="submit" value="Save" id="save_btn">
</form>
<script>
    window.onload = function (event) {
        if (localStorage.getItem('selected_type')) {
            const selected_type = localStorage.getItem('selected_type');
            const dropdown = document.getElementById('product_type');
            for (let i = 0; i < dropdown.options.length; i++) {
                if (dropdown.options[i].value === selected_type) {
                    dropdown.options[i].selected = true;
                    break;
                }
            }
        }
    };
    const product_form = document.getElementById('product_form');
    const save_btn = document.getElementById('save_btn');
    save_btn.addEventListener('click', function (event) {
        event.preventDefault();
        const selected_type = document.querySelector('#product_type').value;
        localStorage.setItem('selected_type', selected_type);
        product_form.submit();
    });
</script>
</body>
</html>

解释：

首先，我们使用
```
options = ["Mobile", "Laptop", "Monitor"]
```
将选项值从 Flask 传递到模板。
在页面加载中，我们检查是否为本地存储键
```
selected_type
```
设置了任何值。如果设置了任何值，那么我们将选定的选项值设置为 true。
在表单提交中，我们阻止提交并将密钥
```
selected_type
```
的本地存储设置为所选产品类型，然后我们使用
```
form.submit()
```
方法提交表单。
我们使用 Flask 的 flash 方法显示提交的表单值。

示范

初始视图。默认情况下，第一项 (
```
Mobile
```
) 被选中，因为本地存储中的
```
selected_type
```
中没有值：

选择笔记本电脑作为产品类型并提交表格后，产品类型将保持笔记本电脑：

Flask 在刷新时保持选择器的选项

问题描述投票：0回答：1

1个回答

示范

参考文献

最新问题

Flask 在刷新时保持选择器的选项

问题描述 投票：0回答：1

1个回答

示范

参考文献

最新问题

问题描述投票：0回答：1