Question

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

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

我从https://github.com/json-editor/json-editor开始，但是它似乎无法满足我的需求。我也看着羊驼毛，但这很艰巨。

羊驼具有optiontree字段类型，但这似乎没有达到我想要的功能（因为我没有将“属性”分配给“值”），尽管呈现的版本表现出< / em>我想要的方式。

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

基本上我想要类似nvidia上的驱动程序选择器... https://www.nvidia.com/download/index.aspx 首先选择一个类型，然后根据类型选择一个序列，等等...

谢谢！

Answer 1

为方便起见，我只是更改了对象的结构。它使实现更加容易。在选项标签中使用索引值作为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>');
   });
});

如何创建一个下拉菜单确定另一个下拉菜单的表单

1 个答案: