个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我开始阅读一些 flask 应用程序编程，我一直在尝试让下拉菜单工作，但到目前为止我没有运气。我想要做的是，当用户从第一个下拉列表中选择一种食物类型时，它应该从数据库中获取相应的列表并填充第二组下拉列表。我不知道如何让它在做出选择后发送快速请求。我真的不明白这里应该做什么。
<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 请求。此数据包含您的食物选择框的值列表。
为此，您需要添加一个端点 /get_food/<foodkind>到你的 Flask View :
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])
关于javascript - Flask Dynamic 依赖下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44646925/
25
4
0
如何将多个json对象添加/映射到dart对象 import 'dart:async'; import 'dart:convert'; import 'package:flutter/foundati
我正在研究将产品集成到 Dynamics Great Plains 中。我之前使用过 Dynamics CRM，但没有使用过 Great Plains。我听说 GP 与 CRM 是不同的动物，即使它们
System.Linq.Dynamic.Core 和 System.Linq.Dynamic 有什么区别？我目前正在使用 System.Linq.Dynamic 并且它不包含对 的支持选择 和 多选
我正在尝试通过Firebase存储将图像上传到Firebase，然后在Firestore中创建一个文档，其中包含上述上传图像的网址。为此，我使用此功能 void uploadImageAndCr
我一直在尝试整理一些东西，使我可以从 ListPlot 中提取点，以便在进一步的计算中使用它们。我目前的方法是使用 Locator[] 选择点。这适用于显示点，但我无法弄清楚如何从带有 head Dy
只要我在与 Program 类相同的程序集中有类 ClassSameAssembly ，下面的代码就可以正常工作。但是，当我将类 ClassSameAssembly 移动到单独的程序集时，会引发 Ru
我只是尝试从Firebase实时数据库解析数据。 但在转换为模型时有问题 我正在尝试从Flutter上解析Firebase数据库中的数据。 但是一个错误说 MY Complete QUIZ: {-M5
我创建了一个方法，当我构建它时，出现了这个错误: type '_InternalLinkedHashMap' is not a subtype of type 'List' in type cast
我对这个 flutter 的简单图表代码有疑问。在我尝试运行代码时显示此错误。请任何人都可以帮助我在这.... The argument type 'List>' can't be assigned
我尝试在我的 flutter 应用程序中解析来自 Firestore 的文档。 Firestore 文档: 我创建了两个类来解析这个文档。 类产品: class Produkt{ String n
我有一个2d-List，其中包含一个字符串和一个Map，如下所示: List> content = [ [ "String", { "one": 23,
我使用 Dart“json_serializable”包在 Flutter 应用程序中的 Firestore 数据结构下反序列化。 { googleBookId: jjl4BgAAQBAJ, prov
我注册了 Dynamic CRM 在线试用版(30 天)并创建了一个非托管自定义解决方案(新字段、一些自定义实体等)。现在，我想导出非托管解决方案并将其导入到我的服务器中的 Dynamic CRM O
当我尝试从 StreamTransform 获取一些数据时遇到一些问题 我不明白什么是正确的数据类型 未捕获的异常:类型错误:“_StreamHandlerTransformer”的实例:“_Stre
我正在尝试获取用户数据，但在这样做时出现以下错误: Exception: type '_InternalLinkedHashMap' is not a subtype of type 'Map 我查看
我正在尝试在 sqflite 数据库中保存一些带有 flutter 的数据，但我仍然收到一条错误消息: [ERROR:flutter/shell/common/shell.cc(181)] Dart
我有一个JSON响应，结构如下：。在这个JSON响应中，有各种动态键，如“Owner”和“Master”，每个键都包含一个JSON对象或一个JSON对象数组。我需要创建一个gson数据类来解析这个动态
在 Dynamics 2012 ax 中编译 CIL 时，我看到以下错误 - 名称为“Dynamics.Ax.application”的重复类型。在程序集中“Dynamics.Ax.applicati
我有一个带有 LinkedHashMap 成员的 StatefulWidget 小部件，如下所示: LinkedHashMap _items = new LinkedHashMap>(); 现在我需要
我正在尝试按照此处所述实现搜索资源功能:https://cloudblogs.microsoft.com/dynamics365/it/2019/05/21/retrieve-resource-ava
我是一名优秀的程序员,十分优秀！