Ниже представлена упрощенная версия разработанного мной приложения. Выпадающие меню динамически обновляются на основе некоторых файлов данных, доступных в сеансе браузера.
Ниже я жестко запрограммировал идею того, с чем я имею дело, чтобы проиллюстрировать природу моей проблемы. Ниже приведены два раскрывающихся меню, в которых можно задать вопрос. Я хочу, чтобы пользователь сначала взаимодействовал с раскрывающимся списком 1. Если пользователь выбирает Option 1, то во втором раскрывающемся списке автоматически отображаются параметры A, B, C. Если пользователь выбирает Option 2, то второе раскрывающееся меню будет автоматически обновлено, чтобы отразить параметры D,E,F,G.
Я думаю, все это можно сделать в браузере, и изменения в раскрывающемся списке 1 могут затем повлияйте на параметры, доступные в раскрывающемся списке 2. Я новичок в javascript / AJAX и не совсем уверен, как с этим справиться, и есть ли другая структура, которую следует рассмотреть.
Надеюсь, что кто-то может предоставить код для меня, чтобы обобщить мою реальную проблему, где количество вариантов в выпадающих списках 1 и 2 будет различаться по длине.
Вот минимальное Flask app.py
from flask import Flask, render_template, request, session, current_app, flash,redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, TextField, SubmitField, SelectField, IntegerField, BooleanField, RadioField, FileField
from wtforms.validators import DataRequired, Length
server = Flask(__name__)
server.secret_key = b'_5#y2L"F4Q8z\n\xec]/'
class simpleForm(FlaskForm):
varlist1 = SelectField('Choose', [DataRequired()], coerce=str)
varlist2 = SelectField('Choose', [DataRequired()], coerce=str)
@server.route('/menu')
def menu():
form = simpleForm()
vars = ['Option 1','Option 2']
var2list = [['A', 'B', 'C'],['D','E', 'F', 'G']]
form.varlist1.choices = vars
form.varlist2.choices = var2list[0]
return render_template('menu.html', form = form)
if __name__ == '__main__':
server.run(debug=True)
И минимальный menu.html файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<title>My Application</title>
<body>
Hello. Choose something:
<br><br>
<br>
<form>
<div>
{{ form.varlist1.label}}
{{ form.varlist1 }}
</div>
<br>
<div>
{{ form.varlist2.label}}
{{ form.varlist2 }}
</div>
</form>
</body>
</html>