我可以通过 Jinja 变量填充依赖选择框吗？

Question

我正在将 Flask 与 Jinja2 模板一起使用，如何使用 Jinja2 或使用 Java 脚本 + Jinja2 变量制作依赖选择痘？

例子：

蟒蛇方面：

@app.route('/')
def dependent():
    cars= {'Chevrolet':['Volt','Malibu','Camry'],'Toyota':['Yaris','Corolla'],'KIA':['Cerato','Rio']}
    return render_template('select.html',cars=cars)

HTML+Jinja 端

<form>
<select name="car_vendor" id="car_vendor">
    {% for key, value in cars.items() %}
        <option value="{{ key }}"> {{ key }} </option>
    {% endfor %}
</select>


<select name="car_model" id="car_model">
    ---
    ---
</select>
</form>

如何根据图片中的 car_vendor 选择框填充 car_model 选择框：

PS：我对 JS、jQuery 和 Ajax 完全一无所知，我看过很多 JS 或 jQuery 示例，我就像一个在沙漠中迷失和瘫痪的人，所以如果你要帮忙，请编辑我的代码示例并且不要将我链接到外部链接。 提前致谢。

Answer 1

首先，您需要指定已选择的汽车供应商和型号，以确定应如何填充相关选择框：

cars = {'Chevrolet':['Volt','Malibu',Camry],'Toyota':['Yaris','Corolla'],'KIA':['Cerato','Rio']}
return render_template('select.html',cars=cars, selected_car='Toyota', selected_model = 'Prius')

其次，对于第一个选择框，您应该只枚举键而不是项目，因为您没有使用字典的值。 你在做什么“有效”但不太清楚。 您应该设置已selected的选项的selected属性：

<select name="car_vendor" id="car_vendor">
    {% for key in cars.keys() %}
        <option value="{{ key }}" {% if key == selected_car %}selected="selected"{% endif %}> {{ key }} </option>
    {% endfor %}
</select>

最后，已选择的汽车型号决定用哪一组型号填充相关选择框：

<select name="car_model" id="car_model">
    {% for model in cars[selected_car] %}
        <option value="{{ model}}" {% if model == selected_model %}selected="selected"{% endif %}> {{ model}} </option>
    {% endfor %}
</select>
<form>

现在以上假设始终选择汽车和汽车型号。 您可能一开始没有选择，其中selected_car和selected_model都是None 。 为了支持这一点，第一个选择框应该有一个初始标签：

<option value=''>*** Select a car make ***</option>

如果没有其他选项作为selected属性集，则默认情况下会选择此选项。 （您可以并且应该向第二个选择框添加一个类似的选项。）并且由于selected_car是None ，您需要用测试包围第二个选择框：

{% if selected_car %}
    <select name="car_model" id="car_model">
    etc.
{% endif %}

因此，在第一个框中有选择之前，不会显示第二个文本框。

但是您必须始终确保当第一个框中的选择更改时，表单已提交并且新选择可以反映在第二个框中。 所以你需要添加到第一个选择框：

<form name="f">
    <select name="car_vendor" id="car_vendor" onchange="document.f.submit();">

更新：示例流程

当第一次调用服务器端脚本时，既没有设置表单变量car_vendor也没有设置car_model 。 因此，调用模板时，模板变量selected_car和selected_model设置为None 。 这会导致汽车供应商选择框没有选择，汽车型号选择框也没有显示。
用户从汽车供应商选择框中选择丰田。 应该安排，每当从此框中进行选择时，如果正在显示汽车模型框，则在提交表单之前首先清除任何汽车模型选择。
表单被提交到服务器端脚本，表单变量car_vendor设置为 'Toyota' 而car_model未设置，因此模板变量selected_car设置为Toyota并且selected_model设置为None 。 这导致汽车模型选择框将 Toyota 显示为当前选定的汽车，并且汽车模型选择框与所有 Toyota 模型一起显示，但没有当前选择。
用户现在在汽车供应商选择框中选择雪佛兰。 因为正在显示汽车模型选择框，所以应该在提交表单之前首先清除它所具有的任何选择（目前没有）。
表单被提交到服务器端脚本，表单变量car_vendor设置为 'Chevrolet' 并且car_model未设置，因此模板变量selected_car设置为Chevrolet并且selected_model设置为None 。 这导致汽车模型选择框将 Chevrolet 显示为当前选定的汽车，并且汽车模型选择框与所有雪佛兰模型一起显示，但没有当前选择。
用户从车型选择框中选择凯美瑞。
表单被提交到服务器端脚本，表单变量car_vendor设置为“Chevrolet”， car_model设置为“Camry”，因此模板变量selected_car设置为Chevrolet ， selected_model id 设置为Camry 。 这导致汽车模型选择框显示 Chevrolet 作为当前选定的汽车，汽车模型选择框显示所有雪佛兰模型和“凯美瑞”作为当前选择。 此外，既然已经选择了供应商和模型，就可以执行任何处理和输出。 请注意，现在如果选择了新供应商，则在提交表单之前将首先取消选择当前模型，以确保属于不同供应商的模型不会随表单一起发送。 这就是选择新车供应商时清除车型选择的原因。

基于样本流的样本代码（或多或少）

from flask import Flask, request, render_template_string
app = Flask(__name__)


@app.route('/', methods=['POST', 'GET'])
def dependent():
    cars = {'Chevrolet':['Volt','Malibu','Camry'],'Toyota':['Yaris','Corolla'],'KIA':['Cerato','Rio']}
    # look for data from form POST (won't be present when we are invoked with GET initially)
    selected_car = request.form['car_vendor'] if 'car_vendor' in request.form else None
    if not selected_car or selected_car not in cars:
        selected_car = None
        selected_model = None
    else:
        selected_model = request.form['car_model'] if 'car_model' in request.form else None
        # This is an alternative to unselecting the car model whenever a new car vendor is selected.
        # Instead, we just check whether the selected model belongs to the selected car vendor or not:
        if selected_model and selected_model not in cars[selected_car]:
            selected_model = None
    # Use a string template for demonstration purposes:
    return render_template_string("""
<!DOCTYPE html>
<html>
<head>
<title>Flask Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<h2>Select Car</h2>
<form name="f" method="post">
  <table>
    <tr>
      <th>Make</th>
    <th>Model</th>
    </tr>
    <tr>
      <td>
        <select name="car_vendor" id="car_vendor" onchange="document.f.submit();">
{% if not selected_car %}
          <option value=''>-- Select a Make --</option>
{% endif %}
{% for car in cars.keys() %}
          <option value="{{ car }}" {% if car == selected_car %}selected="selected"{% endif %}>{{ car }}</option>
{% endfor %}
        </select>
      </td>
      <td>
{% if selected_car %}
        <select name="car_model" id="car_model" onchange="document.f.submit();">
  {% if not selected_model %}
          <option value=''>-- Select a Model --</option>
  {% endif %}
  {% for model in cars[selected_car] %}
          <option value="{{ model }}" {% if model == selected_model %}selected="selected"{% endif %}>{{ model }}</option>
  {% endfor %}
        </select>
{% endif %}
      </td>
    </tr>
  </table>
</form>

{% if selected_car and selected_model %}
<p style="color: red;">Both make and model have been selected: {{ selected_car }} and {{ selected_model }}.</p>
{% endif %}
</body>
</html>
""", cars=cars, selected_car=selected_car, selected_model=selected_model)

我可以通过 Jinja 变量填充依赖选择框吗？

问题描述

1 个解决方案

解决方案1
2 2019-12-01 11:37:46

我可以通过 Jinja 变量填充依赖选择框吗？

问题描述

1 个解决方案

解决方案1 2 2019-12-01 11:37:46

解决方案1
2 2019-12-01 11:37:46