我需要创建一个具有3个下拉式字段的表单,其中每个下拉式字段都应根据前一个字段的选择填充选项。我有一个对象中的所有数据。
例如:
{
"campaign1": {
"name": "Campaign 1",
"projects": {
"job A": [
"proj 1"
],
"job B": [
"proj 2",
"proj 3"
]
}
},
"campaign2": {
"name": "Campaign 2",
"projects": {
"job C": [
"proj 4",
"proj 5",
"proj 6"
],
"job D": [
"proj 7",
"proj 8",
"proj 9"
]
}
}
}
这个想法是,首先你选择一个"活动",然后第2个下拉菜单只显示该活动的"工作",然后第3个只显示该工作的"项目"。
我从https://github.com/json-editor/json-editor开始,但它似乎不能满足我的需要。我也看了看羊驼,但它令人生畏。
Alpaca有一个optiontree
字段类型,但这似乎没有做我想要的(因为我没有将"属性"赋给"值"),尽管渲染版本 * 行为 * 符合我想要的方式。
我希望按原样使用我的数据对象,尽管我可以在必要时重新构造它。
基本上我想要的东西像nvidia上的驱动程序选择器... https://www.nvidia.com/download/index.aspx首先选择一种类型,然后一系列的基础上的类型,等等...
谢谢!
2条答案
按热度按时间k5ifujac1#
我只是为了方便而改变了对象的结构。它使实现更容易。使用索引值作为选项标记中的值属性,该属性可用于检索下一个过滤器的子对象。我根据活动过滤器的结果为第二个过滤器制作了一个示例代码。
chhkpiq42#
您可以使用另一个选项来替换每个字段的数据源,具体取决于之前的选择。下面是一个工作的JS Fiddle,其中下拉选项由之前的选择决定:https://jsfiddle.net/bsunderland/78hybL3v/3/
此外,下面是一些示例代码,用于基于先前的字段选择设置select中的选项,但使用服务器端调用: