我可以通過 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