![](/img/trans.png)
[英]Get selected option from dynamic dependent dropdown list - using Flask (Python)
[英]Flask Dynamic dependent dropdown list
我开始阅读一些烧瓶应用程序编程,我一直试图让下拉菜单工作,但到目前为止我没有运气。 我想要做的是,当用户从第一个下拉列表中选择一种食物类型时,它应该从数据库中获取相应的列表并填充第二组下拉列表。 一旦做出选择,我不知道如何让它发送快速请求。 我真的不明白这里应该做些什么。
<body> <div> <form action="{{ url_for('test') }}" method="POST"> <div> <label>Food:</label> <select id="food" name="food" width="600px"> <option SELECTED value='0'>Choose your fav food</option> {% for x in food %} <option value= '{{ x }}'>{{x}}</option> {% endfor %} </select> <!-- After a selection is made, i want it to go back to the database and fectch the results for the below drop box based on above selection --> </div> <div> <label>Choose Kind of Food:</label> <select id="foodChoice" name="foodChoice" width="600px"> <option selected value='0'>Choose a kind</option> {% for x in foodChoice %} <option value= '{{ x }}'>{{x}}</option> {% endfor %} </select> </div> <div> <input type="submit"> </div> </form> </div>
app.html
@app.route('/', method = ['GET', 'POST'])
def index():
foodList = [ i.type for i in db.session.query(FoodType)]
return render_template('main.html', food=foodList)
@app.route(/foodkind', method = ['GET', 'POST'])
def foodkind():
selection = request.form['foodChoice']
foodKind = [ i.kind for i in db.session.query(FoodType).filter(FoodKind == selection)]
return render_template('main.html', foodChoice = foodKind)
我看了很多问题,但我还没有找到任何可以帮助我的简单问题。 如果有人可以为我演示代码,那么我可以从中查看和学习它会很棒。
你需要在这里使用Ajax来检索食物清单,具体取决于你选择的食物类型。 因此,在您的模板中,您需要包含以下内容:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script>
$(document).ready(function() {
$('#foodkind').change(function() {
var foodkind = $('#foodkind').val();
// Make Ajax Request and expect JSON-encoded data
$.getJSON(
'/get_food' + '/' + foodkind,
function(data) {
// Remove old options
$('#food').find('option').remove();
// Add new items
$.each(data, function(key, val) {
var option_item = '<option value="' + val + '">' + val + '</option>'
$('#food').append(option_item);
});
}
);
});
});
</script>
</head>
<body>
<form>
{{ form.foodkind() }}
{{ form.food() }}
</form>
</body>
</html>
此代码将对JSON编码数据进行简写Ajax请求。 此数据包含食物选择框的值列表。
为此,您需要在Flask视图中添加endpoint /get_food/<foodkind>
:
food = {
'fruit': ['apple', 'banana', 'cherry'],
'vegetables': ['onion', 'cucumber'],
'meat': ['sausage', 'beef'],
}
@app.route('/get_food/<foodkind>')
def get_food(foodkind):
if foodkind not in food:
return jsonify([])
else:
return jsonify(food[foodkind])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.