根據之前在 Flask python 中的選擇填充下拉菜單，而不使用 ajax？

Question

我有一個 dataframe 形式的 csv 文件，其中包括位置、設備和單元。 位置可能是具有不同單元和設備的重復位置。

我想要4個下拉菜單

地點
單元
亞基
設備

還有一個提交按鈕，它顯示所有選定的字段。

在選擇位置時，它應該顯示所有基於位置選擇的唯一位置，如 PA，select 單元將顯示如下

Unit

    >:LAN
    >:WAN

Subunit

    >. LAN Switch
    >. WAN switch

Device

    > D2
    > D4

這是問題陳述的一個例子。 原始文件由數千個位置和相關單元組成。

> Location   Device  Unit
> USA         D1     LAN core
> PA          D2     LAN Switch
> BLR         D3     LAN core
> PA          D4     WAN switch
> MEL         D5     DC metro

應用程序.py：

from flask import Flask, render_template, request
    import pandas as pd
    app = Flask(__name__)
    app.debug = True

    @app.route('/', methods=['GET'])
    def dropdown():
        total_data = pd.read_csv("CPS.csv")
        print(total_data)
        data = total_data['LOCATION'].unique()
        print(data)

        return render_template('index.html', data=data)

    if __name__ == "__main__":
        app.run()

索引.html

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Dropdown</title>
    </head>
    <body>
      <select name= data  method="GET" action="/">
        {% for row in data %}
        <option value= "{{row}}" SELECTED>{{row}}</option>"
        {% endfor %}
      </select>
    </body>
  </html>

Answer 1

如果您想避免通過 ajax 請求，那么您應該考慮使用IndexedDB等技術在客戶端注冊您的數據。

但是，如果您想將信息保存在服務器端並動態訪問它，您可以通過以下方式實現：

from flask_wtf import FlaskForm
from wtforms import SelectField
from flask import Flask, render_template, request, jsonify
import pandas as pd

class LocationsForm(FlaskForm):
    locations = SelectField('Locations')

@app.route('/', methods=['GET', 'POST'])
def dropdown():
    total_data = pd.read_csv("CPS.csv")
    data = total_data['LOCATION'].unique().tolist()

    form = LocationsForm()
    form.locations.choices = [(i, i) for i in data]

    return render_template(form=form)


@app.route('/device_choice/<value>')
def device_choice(value):
    location_choosen = value
    df = pd.read_csv("CPS.csv")
    df = df.set_index(["LOCATION"])
    df1 = df.loc[location_choosen, 'Device'].tolist()

    return jsonify({'Devices': df1})

@app.route('/unit_choice/<value>')
def unit_choice(value):
    # YOU CAN IMPLEMENT THIS BY FOLLOWING THE SAME MODEL AS THE DEVICES

我創建了一個僅使用位置值動態填充的表單。 然后我渲染表格。

在我的 JS 腳本中，我放置了一個在位置字段發生變化時觸發的事件。

每次更改時，我都會將選定的值 ( location ) 發送到device_choice route並找到與該位置關聯的所有設備。 我將設備作為列表返回並填寫適當的選擇字段（ devices ）

HTML的側面

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Dropdown</title>
    </head>
    <body>
      {{ form.hidden_tag() }}
      {{ form.locations(class_="form-control") }}
      <select class="form-control devices" id="devices"></select>
      <select class="form-control unit" id="unit"></select>
    </body>
    <script>
        let location = document.getElementById('locations');
        let devices = document.getElementById('devices');

        location.onchange = function(){
            value = location.value;

            fetch('/device_choice/' + value).then(function(response){

                response.json().then(function(data){
                    let optionHTML = '';

                    for(let opt of data.Devices){
                        optionHTML += '<option value ="'  + opt + '">' + opt + '</option>';
                    }

                    devices.innerHTML = optionHTML;

                });
            });
        }
  </script>
  </html>

您也只需對單位應用相同的邏輯...

根據之前在 Flask python 中的選擇填充下拉菜單，而不使用 ajax？

問題描述

1 個解決方案

解決方案1
3 已采納 2019-11-11 22:02:51

根據之前在 Flask python 中的選擇填充下拉菜單，而不使用 ajax？

問題描述

1 個解決方案

解決方案1 3 已采納 2019-11-11 22:02:51

解決方案1
3 已采納 2019-11-11 22:02:51