Javascript 如何创建一个窗体，其中一个下拉列表决定另一个下拉列表的选项

我需要创建一个具有3个下拉字段的表单，其中每个下拉字段都应根据上一个字段的选择填充选项。我的所有数据都在一个对象中

例如：

{
“活动1”：{
“名称”：“活动1”，
“项目”：{
“工作A”：[
“项目1”
],
“工作B”：[
“项目2”，
“项目3”
]
}
},
“活动2”：{
“名称”：“活动2”，
“项目”：{
“职务C”：[
“项目4”，
“项目5”，
“项目6”
],
“职务D”：[
“项目7”，
“项目8”，
“项目9”
]
}
}
}

其思想是，首先选择一个“活动”，然后第二个下拉列表仅显示该活动的“工作”，然后第三个下拉列表仅显示该工作的“项目”

我从一开始就用它，但它似乎不能满足我的需要。我也看了羊驼，但它让人望而生畏

Alpaca有一个

optiontree

字段类型，但这似乎不是我想要的（因为我没有将“属性”指定给“值”），尽管渲染版本的行为符合我的要求

我希望按原样使用数据对象，尽管必要时可以重新构造它

基本上我想要像nvidia上的驱动程序选择器。。。 首先选择一个类型，然后根据类型选择一个系列，等等

---

谢谢

为了方便起见，我刚刚更改了对象的结构。它使实现更容易。将索引值用作选项标记中的值属性，该属性可用于为下一个筛选器检索子对象。我根据活动过滤器的结果为第二个过滤器编写了一个示例代码

$（'select'）。在（'change'，function（）上{
var selected_index=$（this）.children（“选项：selected”）.val（）；
var selected_val=$（this）.children（“选项：selected”）.html（）；
var obj=[{
“活动1”：{
“名称”：“活动1”，
“工作”：[{
“名称”：“作业A”，
“项目”：[
“项目1”
]},{
“名称”：“作业B”，
“项目”：[
“项目2”，
“项目3”
]}
]}
},{
“运动2”：{
“名称”：“活动2”，
“工作”：[{
“名称”：“作业C”，
“项目”：[
“项目4”，
“项目5”，
“项目6”
]},{
“名称”：“作业D”，
“项目”：[
“项目7”，
“项目8”，
“项目9”
]}
]}
}];
jQuery（'#select_2'）.html（''）；
obj[selected_index[selected_val].jobs.forEach（函数（数据，索引）{
jQuery（'#select_2'）。append（'data'）；
});
})；