选项列表,同时从数据库查询选项"/>
使用 javascript 创建 3 层动态选项列表,同时从数据库查询选项
我想在一个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。
从数据库查询选项时,如何构造一个三层动态选项列表?
回答如下:更多推荐
使用 javascript 创建 3 层动态选项列表,同时从数据库查询选项
发布评论