Javascript 使用嵌套数据进行选择

我正在尝试创建嵌套的select optgroup，并尝试了以下操作：

const数据=[
{
部门：5，
扇区名称：“第一扇区”，
部门：[
{
部门名称：“生产”，
职位名称：[
{
JobTitleID:167，
部门编号：51，
职位名称：“生产经理”，
删除：false，
排序者：5
},
{
JobTitleID:178，
部门编号：51，
职位名称：“生产主管”，
删除：false，
排序：3
},
{
JobTitleID:449，
部门编号：51，
职位名称：“高级墙板设计师”，
删除：false，
分拣员：15
}
]
},
{
部门名称：“设计/工程”，
职位名称：[
{
JobTitleID:294，
部门编号：52，
职位名称：“高级桁架设计师”，
删除：false，
排序者：5
}
]
}
]
},
{
部门：24，
扇区名称：“第二扇区”，
部门：[
{
部门名称：“咨询”，
职位名称：[
{
JobTitleID:191，
部门编号：92，
工作名称：“锯车间主管”，
删除：false，
排序器：1
},
{
JobTitleID:474，
部门编号：92，
职位名称：“高级桁架设计师-兼职”，
删除：false，
分拣员：11
}
]
},
{
部门名称：“管理”，
职位名称：[
{
JobTitleID:461，
部门编号：114，
JobName:“Sawyer”，
删除：false，
排序：7
},
{
JobTitleID:278，
部门编号：114，
JobName:“服务经理”，
删除：false，
排序：2
}
]
}
]
}
];
常量应用=（）=>{
返回(
{data.map（（levelOne，i）=>(
{levelOne.departments.map（（levelTwo，j）=>(
{levelTwo.jobtitles.map（（作业，l）=>(
{job.JobName}
))}
))}
))}
);
};
render（，document.getElementById（“根”））


optgroup不能嵌套，因此只显示sectorName
您可以尝试使用react选择器库。下面是我发现的一个嵌套级别的示例
您提供的沙盒工作正常？@GuruparanGiritharan，是的，它工作正常，但没有显示我在问题中提到的结果（预期输出）。从我看到的情况来看，->显示为选项，其余为标签，可能我没有收到您的建议requirement@GuruparanGiritharan你在登记吗？因为我知道这个问题似乎只发生在chrome上。事实上，这是一个浏览器问题，最好也提一下，我想这个论坛的人可以建议一个图书馆谢谢你的回答。。但为什么最后两个选项不允许选择单个项目？
Corporate（Total）
和
Product（Total）
下的选项不允许选择单个项目。。而是对其下的所有选项进行选择。。