SWE*_*AIN 2 html python web-applications flask drop-down-menu
我有一个数据框形式的 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
应用程序.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>
如果您想避免通过 ajax 请求，那么您应该考虑使用IndexedDB等技术在客户端注册数据。
\n\n但是，如果您想将信息保留在服务器端并动态访问它，可以按以下方法实现：
\n\nfrom flask_wtf import FlaskForm\nfrom wtforms import SelectField\nfrom flask import Flask, render_template, request, jsonify\nimport pandas as pd\n\nclass LocationsForm(FlaskForm):\n locations = SelectField(\'Locations\')\n\n@app.route(\'/\', methods=[\'GET\', \'POST\'])\ndef dropdown():\n total_data = pd.read_csv("CPS.csv")\n data = total_data[\'LOCATION\'].unique().tolist()\n\n form = LocationsForm()\n form.locations.choices = [(i, i) for i in data]\n\n return render_template(form=form)\n\n\n@app.route(\'/device_choice/<value>\')\ndef device_choice(value):\n location_choosen = value\n df = pd.read_csv("CPS.csv")\n df = df.set_index(["LOCATION"])\n df1 = df.loc[location_choosen, \'Device\'].tolist()\n\n return jsonify({\'Devices\': df1})\n\n@app.route(\'/unit_choice/<value>\')\ndef unit_choice(value):\n # YOU CAN IMPLEMENT THIS BY FOLLOWING THE SAME MODEL AS THE DEVICES\n我创建了一个表单，仅使用位置的值 \xe2\x80\x8b\xe2\x80\x8b 动态填充该表单。然后我渲染表单。
\n\n在我的 JS 脚本中，我放置了一个事件，每当位置字段发生变化时就会触发该事件。
\n\n每次更改时，我都会将选定的值 ( location) 发送到device_choice route并查找与该位置关联的所有设备。我将设备作为列表返回并填写相应的选择字段 ( devices)
HTML 的侧面
\n\n<!DOCTYPE html>\n <html lang="en">\n <head>\n <meta charset="UTF-8">\n <title>Dropdown</title>\n </head>\n <body>\n {{ form.hidden_tag() }}\n {{ form.locations(class_="form-control") }}\n <select class="form-control devices" id="devices"></select>\n <select class="form-control unit" id="unit"></select>\n </body>\n <script>\n let location = document.getElementById(\'locations\');\n let devices = document.getElementById(\'devices\');\n\n location.onchange = function(){\n value = location.value;\n\n fetch(\'/device_choice/\' + value).then(function(response){\n\n response.json().then(function(data){\n let optionHTML = \'\';\n\n for(let opt of data.Devices){\n optionHTML += \'<option value ="\' + opt + \'">\' + opt + \'</option>\';\n }\n\n devices.innerHTML = optionHTML;\n\n });\n });\n }\n </script>\n </html>\n您只需要对单位应用相同的逻辑......
\n