NodeJS 如何创建一个表单,其中一个下拉菜单决定另一个下拉菜单的选项

drnojrws  于 2022-12-22  发布在  Node.js
关注(0)|答案(2)|浏览(204)

我需要创建一个具有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首先选择一种类型,然后一系列的基础上的类型,等等...
谢谢!

k5ifujac

k5ifujac1#

我只是为了方便而改变了对象的结构。它使实现更容易。使用索引值作为选项标记中的值属性,该属性可用于检索下一个过滤器的子对象。我根据活动过滤器的结果为第二个过滤器制作了一个示例代码。

$('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>');
   });
});
chhkpiq4

chhkpiq42#

您可以使用另一个选项来替换每个字段的数据源,具体取决于之前的选择。下面是一个工作的JS Fiddle,其中下拉选项由之前的选择决定:https://jsfiddle.net/bsunderland/78hybL3v/3/
此外,下面是一些示例代码,用于基于先前的字段选择设置select中的选项,但使用服务器端调用:

"postRender": function(control) {
            var parentType = control.childrenByPropertyId["Parent_LookupTypeCode"]; //Grab the Parent Lookup Type Object
            var parentCode = control.childrenByPropertyId["Parent_LookupCode"]; //Grab the Parent Lookup Object
            parentCode.subscribe(parentType, function(val) {//Subscribe parentCode to changes to parentType
                // alert(val);
                if(!val) {//val = value of parentType
                    val="Metrics"; //If missing, do nothing
                }
                else{
                    this.options.dataSource = "./ExtraStuff/Load_Lookups.php?q=" + val; //Load values based on val of parentType
                }

                this.refresh(); //Refresh the form. This is needed. Without it, the updated options won't show
            });
        }

相关问题