Flask Dynamic依赖下拉列表 [英] Flask Dynamic dependent dropdown list
问题描述
我开始阅读一些烧瓶应用程序编程，并且我一直在尝试使下拉菜单正常工作，但是到目前为止，我还没有运气.我想做的是，当用户从第一个下拉列表中选择一种食物类型时，它应该从数据库中获取相应的列表并填充第二组下拉列表.一旦做出选择，我不知道如何使它发送快速请求.我真的不明白该怎么办.
I started reading into some flask application programming and I have been trying to get drop down menu to work, but so far I have had no luck. What I want to do is, when the user selects a Type of Food from the first dropdown list, it should get the corresponding list from the database and fill the second set of drop down list. I do not know how to make it send a quick request once a selection is made. I really don't understand what should be done here.
<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)
我查看了许多问题，但还没有找到任何可以帮助我的简单方法.如果有人可以为我演示代码，这样我可以查找并学习，那就太好了.
I have looked at many questions and I have not yet found anything simple that would help me. It would be great if someone can demo a code for me so I can look and learn from it.
推荐答案
您需要在此处使用Ajax来检索食物列表，具体取决于您选择的食物种类.因此，在模板中，您将需要包含以下内容:
You need to use Ajax here to retrieve a list of the food depending on your choice of foodkind. So in your template you will need to include something like this:
<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请求.此数据包含您的食物选择框的值的列表.
This code will make a shorthand Ajax request for JSON-encoded data. This data contains a list of the values for your food select box.
为此，您需要在Flask视图中添加一个端点/get_food/< foodkind> :
For this to work you will need to add an endpoint /get_food/<foodkind> to your Flask views:
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])
这篇关于Flask Dynamic依赖下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
