Flask探索-使用ajax实现form表单中关于Select下拉框的级联操作

大家好，我是金鱼座，一个走在测试领域这片蓝海中， 蹉跎前行的技术渣渣，唯有一直走下去，也许能改变点什么，加油！

在进行flask的web开发过程中， 个人需要实现form表单中两个下拉框中的数据级联操作，本身以为wtform可以支持这类的操作，但是搜遍了不少帖子都无法找到解决方案

实际上脱离wtform的话，我能想到的就是通过ajax进行异步请求来从后端中得到级联的值，然后通过js对html的改写其的值

具体实现代码如下：

首先查看form表单定义

image.png

上图中，在proid字段中，增加onchange属性，该属性主要就是检查下拉框是否发送值更改，一旦你更改下拉框内容，则会自动触发该方法

核心前端js实现

image.png

视图实现

image.png

通过ajax异步根据上一个下拉框中的值，然后通过后台实现其子类的返回，在通过ajax中的appendTo方法，将指定的select中的值进行更换，通过实验可以实现效果

注意：
js实现的组装option时，一定要按照form的初始化的结构要求，去匹配赋值value和option的text值，一个赋值id，一个赋值value，否则会导致validatesubmit失效

如果觉得本帖对你有帮助，请记得点赞关注哦

前辈借鉴:
https://blog.csdn.net/qq_38787214/article/details/86319271
https://a25765339.iteye.com/blog/2113284