根据第一个下拉菜单选择填充第二个下拉菜单

时间:2020-07-20 16:10:37

标签: javascript html flask web-deployment

我有一个带有两个下拉菜单的表单,我希望根据第一个所选选项填充第二个下拉菜单,但是第二个下拉菜单数据由REST API调用填充。

示例: 选择下拉菜单1为 poc ,然后对 https:// apiserver / api / poc 进行其余的API调用,并返回特定数据,并且现在可在其中使用下拉2。

我该如何实现?目前的前端是HTML / CSS,JavaScript,但在Python Flask上运行(将很快转向Vue / React)。是否应该基于REST API中的下拉菜单1使用JavaScript检索数据?有人有这个例子吗?

1 个答案:

答案 0 :(得分:0)

是的,JavaScript可用于实现上述功能。流程将是,第一个用户将从第一个下拉列表中选择一个值,您必须在第一个下拉列表上侦听onchange事件,并在其onchange回调函数中进行API调用。然后根据从API调用收到的响应添加选项。要添加选项,您必须使用js操作dom。

一段时间前,我尝试使用静态数据而非API(针对您的情况)使用3个下拉列表创建类似的示例。我在其中使用了jQuery。请参阅此github link以获得有关dom操作的想法。