如何创建表单，其中一个下拉列表确定另一个下拉列表的选项

我需要创建一个包含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"
      ]
    }
  }
}

我们的想法是，首先您选择“广告系列”，然后第二个下拉列表仅显示该广告系列的“作业”，然后第三个下拉列表仅显示该作业的“项目”。

我从，但它似乎无法做我需要的。我也看着羊驼，但这令人生畏。

羊驼有一个optiontree字段类型，但似乎没有做我想要的（因为我没有将'属性'分配给'值'）虽然渲染版本的行为符合我的要求。

我想按原样使用我的数据对象，虽然我可以在必要时重新构造它。

基本上我想要像nvidia上的驱动程序选择器... .aspx首先选择一种类型，然后是基于类型的系列等...

谢谢！

为了方便起见，我只是改变了对象的结构。它使实现更容易。在索引标记中使用索引值作为value属性，可用于检索下一个过滤器的子对象。我根据广告系列过滤器的结果为第二个过滤器制作了示例代码。

$('select').on('change', function() {
   var selected_index = $(this).children("option:selected").val();
   var selected_val = $(this).children("option:selected").html();
   var obj = [{
     "Campaign 1": {
     "name": "Campaign 1",
        "jobs": [{
            "name" : "job A",
            "projects": [
               "proj 1"
             ]},{
            "name" : "job B",  
            "projects": [
                "proj 2",
                "proj 3"
             ]}
         ]}
       },{
     "Campaign 2": {
          "name": "Campaign 2",
          "jobs": [{
               "name" : "job C",
               "projects": [
                   "proj 4",
                   "proj 5",
                   "proj 6"
               ]},{
               "name" : "job D",
               "projects": [
                   "proj 7",
                   "proj 8",
                   "proj 9"
               ]}
           ]}
       }];
   jQuery('#select_2').html('');
   obj[selected_index[selected_val].jobs.forEach( function(data, index){
     jQuery('#select_2').append('<option value="index">data</option>');
   });
});