使用 javascript 创建 3 层动态选项列表，同时从数据库查询选项

Question

我想在一个ejs页面显示一个3层的动态选项列表

第二层选项根据第一层而变化。 第三层选项根据第二层而变化。

我找到了可以完成这个任务的代码，但是选项的数据在这个版本中是用javascript写的。

 <form>
                Area
                <select id="list1"></select>
                
                City
                <select id="list2"></select>
                
                Town
                <select id="list3"></select>
</form>

    var colleges=['北','中','南'];

    var inner="";
    for(var i=0;i<colleges.length;i++){

        inner+=`<option value=i>${colleges[i]}</option>`;
    }
    $("#list1").html(inner);

    var noIndex;
    var sectors=new Array();
    sectors[0]=['台北 ',' 桃園',' 新竹 '];
    sectors[1]=['台中 ',' 彰化',' 苗栗 '];    
    sectors[2]=['高雄 ','屏東 ',' 台南 '];    

     $("#list1").change(function(){
        index=this.selectedIndex;
        noIndex =index;

        var Sinner="";
        for(var i=0;i<sectors[index].length;i++){
           // Sinner=Sinner+'<option value=i>'+sectors[index][i]+'</option>';
           Sinner+=`<option value=i>${sectors[index][i]}</option>`;
        }
        $("#list2").html(Sinner);
       

    var sectorss=new Array();
    sectorss[0]=['台北 ',' 桃園',' 新竹 '];
    sectorss[1]=['台中 ',' 彰化',' 苗栗 '];   
    sectorss[2]=['高雄 ','屏東 ',' 台南 '];       
    
    sectorss[0][0]=['中山 ',' 松山' ,' 士林' ];
    sectorss[0][1]=['中壢 ',' 內壢' ,' 楊梅' ];
    sectorss[0][2]=['竹北 ',' 竹東' ,' 內灣' ];
    sectorss[1][0]=['太平 ',' 大甲' ,' 清水' ];
    sectorss[1][1]=['員林 ',' 田中' ,' 彰化' ];
    sectorss[1][2]=['通宵 ',' 苑里' ,' 三義' ];
    sectorss[2][0]=['鳳山 ',' 楠梓' ,' 鼓山' ];
    sectorss[2][1]=['枋山 ',' 林邊' ,' 佳東' ];
    sectorss[2][2]=['南科 ',' 永康' ,' 保安' ];


    $("#list2").change(function(){
        index=this.selectedIndex;
        var Sinner3="";
        for(var i=0;i<sectorss[noIndex][index].length;i++){
            Sinner3=Sinner3+'<option value=i>'+sectorss[noIndex][index][i]+'</option>';
        }
        $("#list3").html(Sinner3);
    });

    $("#list2").change();

    });
    $("#list1").change();

在我的情况下，选项是来自 mongoDB 的查询。所以我不能通过在 javascripts 中编写 var 来构造选项。

数据在mongoDB中存储如下：

[
  {
platform: 'aaa',
style: 'cool',
number: [ '4' ],
  },
  {
platform: 'aaa',
style: 'bright',
number: [ '2', '6' ],
  },
  {
platform: 'bbb',
style: 'dark',
number: [ '6', '8' ],
  },
  {
platform: 'aaa',
style: 'chill',
number: [ '3' ],
  }
]

因此，

第一层包含2个选项：['aaa','bbb']

第二层包含 (3, 1) 个选项：[['cool', 'bright', 'chill'], ['dark'] ]

第三层包含( (1,2,1) , (2) ) options:[ [ ['4'],['2', '6'],['3'] ] , ['6', '8']]

例如，

当我在第一层选择'aaa'时，我可以从['cool','bright','chill']中选择一个。

如果我在第二层选择'bright'，我可以在第三层从['2', '6']中选择一个。

我在 nodejs 中从 mongoDB 传输选项的数据结构，但是当 res.render 到 ejs 时它们变成了 string。

从数据库查询选项时，如何构造一个三层动态选项列表？