Как сделать зависимые выпадающие списки в html, используя Flask?
У меня есть четыре выпадающих списка.Я хочу, чтобы параметры во втором раскрывающемся меню соответствовали тому, что было выбрано в первом раскрывающемся списке.Я сделал выпадающие списки в стиле HTML с использованием CSS и интегрировал их с Flask.
Я не смог найти в интернете ничего, что могло бы мне помочь.Пожалуйста, дайте мне знать, если мне нужно поделиться своим кодом.Ниже мой код
Колба
from flask import render_template,request,redirect,url_for,Flask
from FlaskWebProject3 import app
@app.route('/')
@app.route('/home', methods = ['GET'])
def home():
proglist = ["Btech","MBATech","Btech_Integrated","Mtech"]
return render_template('UI2.html', proglist=proglist)
@app.route("/hello", methods = ['POST'])
def hello():
select = request.form.get('val')
select2 = request.form.get('val2')
select3 = request.form.get('val3')
select4 = request.form.get('val4')
final = str(select)+" "+str(select2)+" "+str(select3)+" "+str(select4)
if "None" in final:
return "Please select some option in all dropdowns"
else:
return final
HTML код
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale =1.0">
<title>Select Options</title>
<style>
body {
background: url("F:/Meethi Folder/COLLEGE/COMPETITIONS/Sidh Competition/nmims_logo.png");
background-position:515px 330px;
background-repeat: no-repeat;
background-size:15%;
}
h2 {
color: black;
}
.wrapper{
text-align:center;
}
.button{
position:absolute;
left:570px;
background-color:#A9A9A9;
font-size: 30px;
top:35%;
}
form{
display:inline-block
}
.ex
{
margin:auto;
width:90%;
padding:40px;
border:outset;
}
select
{
display:inline-block;
cursor:pointer;
font-size:16px;
}
.ey
{
display:inline-block;
padding:40px;
}
.gap{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<div class = "ex">
<form method="POST" action="{{ url_for('hello')}}">
<h2> Choose The Programme:</h2>
<select name="val" method="GET" action="/">
<option value="None" selected>Select Programme</option>
{% for x in proglist %}
<option value="{{x}}">{{x}}</option>
{% endfor %}
</select>
<h2> Choose The Course:</h2>
<select name="val2">
<option value="None" selected>Select Course</option>
<option value="CS">CS</option>
<option value="DS">DS</option>
<option value="EXTC">EXTC</option>
<option value="civil">civil</option>
<option value="mechanical">mechanical</option>
</select>
<h2> Choose The Year:</h2>
<select name="val3">
<option value="None">Select Year</option>
<option value="First_Year">First Year</option>
<option value="Second_Year">Second Year</option>
<option value="Third_Year">Third Year</option>
<option value="Fourth_Year">Fourth Year</option>
<option value="Fifth_Year">Fifth Year</option>
<option value="Sixth_Year">Sixth Year</option>
</select>
<h2> Choose The Hour:</h2>
<select name="val4">
<option value="None">Select Time Slot</option>
<option value="8:00am">8:00 am</option>
<option value="9:00am">9:00 am</option>
<option value="10:00am">10:00 am</option>
<option value="11:00am">11:00 am</option>
<option value="12:00pm">12:00 pm</option>
<option value="1:00pm">1:00 pm</option>
<option value="2:00pm">2:00 pm</option>
<option value="3:00pm">3:00 pm</option>
<option value="4:00pm">4:00 pm</option>
<option value="5:00pm">5:00 pm</option>
</select>
<div class="wrapper">
<button class="button" type="submit">Start</button>
</div>
</form>
</div>
</body>
</html>