Question

我有引导程序下拉列表，用于从MySQL表中选择项目，一切正常。我唯一的问题是下拉菜单重置为其默认值（显然，因为我已经在HTML中设置了默认值）。我想要的是让他们保留最后选择的值，这样，如果用户希望对其进行编辑，则不必再重新选择同一项目。

下面是选择代码的方式，以让您了解它的状态，其中包含一些下拉列表，其中仅显示一个，然后在我的app.py中显示Python代码。

<div class="col-sm-10">
    <select class="form-control" name="item-select" id="item-select">
    <option value=""></option>
    <option value="hoodie">Hoodie</option>
    <option value="long_sleave_1/4_zip">Long Sleave 1/4 zip</option>
    <option value="ls_comfort_tee">Long Sleave Comfort Tee</option>
    <option value="ss_comfort_tee">Short Sleave Comfort Tee</option>
    <option value="team_polo">Team Polo</option>
    <option value="run_tank">Run Tank</option>
    <option value="run_tee">Run Tee</option>
    </select>
</div>
<div class="col-sm text-right">
    <button name="subbutton" value="submit" type="submit" class="btn btn-primary">Confirm</button>
</div>

gender=request.form["gender-select"]
item=request.form["item-select"]
size=request.form["size-select"]
stock=con.execute(get_stock.format(item,size,gender)).fetchall()   
size=request.form["size-select"]   
amount=request.form["clothingamount"]
in_out=request.form['in_out']
stock=con.execute(get_stock.format(item,size,gender)).fetchall()
con.close()
engine.dispose()
return render_template('stock_check.html', stock=stock)

Answer 1

将所选项目从Flask发送到HTML模板，并在值匹配的情况下添加selected属性。

我正在展示这种无需数据库连接的简化示例。

代码：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/item-selection", methods=["GET", "POST"])
def form_handler():
    previous_data = {"selected_item":"team_polo"}
    if request.method == "GET":
        return render_template("index.html", previous_data=previous_data)
    elif request.method == "POST":
        result = request.form["item-select"]
        return render_template("index.html", previous_data=previous_data,
                               result=result)

index.html：

<html>
<head>
  <title>Form Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div id="submitted_value">
      {% if result %}
        Selected Item: {{ result }}
      {% endif %}
    </div>
    <form action="/item-selection" method="post">
      <div class="form-group">
        <label for="item-select">Select item</label>
        <select class="form-control" name="item-select" id="item-select">
          <option value=""></option>
          <option value="hoodie" {% if previous_data["selected_item"] == "hoodie"%} selected {% endif %} >Hoodie</option>
          <option value="long_sleave_1/4_zip" {% if previous_data["selected_item"] == "long_sleave_1/4_zip"%} selected {% endif %}>Long Sleave 1/4 zip</option>
          <option value="ls_comfort_tee" {% if previous_data["selected_item"] == "ls_comfort_tee"%} selected {% endif %}>Long Sleave Comfort Tee</option>
          <option value="ss_comfort_tee" {% if previous_data["selected_item"] == "ss_comfort_tee"%} selected {% endif %}>Short Sleave Comfort Tee</option>
          <option value="team_polo" {% if previous_data["selected_item"] == "team_polo"%} selected {% endif %}>Team Polo</option>
          <option value="run_tank" {% if previous_data["selected_item"] == "run_tank"%} selected {% endif %}>Run Tank</option>
          <option value="run_tee" {% if previous_data["selected_item"] == "run_tee"%} selected {% endif %}>Run Tee</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</body>
</html>

输出：

假设我们已经将team_polo作为选定项存储在数据库中。

在提交表单之前，默认情况下将选择值：

提交表单后，显示所选值：

替代的更好的解决方案：

处理选择项的每个值都容易出错。您可以使用Flask扩展名来处理数据库中以及HTML表单中的表单值。

查看documentation of flask-wtf's package了解详情。

将最后选择的项目保留在下拉菜单中

1 个答案: