在不使用ajax的情况下根据Flask python中的先前选择填充下拉菜单？

2024-05-17 • 问答

我有一个数据框形式的csv文件，该文件由位置，设备和单位组成。位置可能是使用不同单元和设备的重复位置。

我想要4个下拉菜单

位置
单位
子单位
设备

还有一个提交按钮，显示所有选定的字段。

在选择位置时，应基于PA之类的位置显示所有唯一的位置，选择单元将显示为

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

app.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()

index.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>

如果要避免进行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>

您也只需对单元应用相同的逻辑...

在不使用ajax的情况下根据Flask python中的先前选择填充下拉菜单？

viphu857143 回答：在不使用ajax的情况下根据Flask python中的先前选择填充下拉菜单？

大家都在问