Javascript 嵌套映射函数

我有一个数组，用于生成一系列选项，这些选项将填充到html select元素中。这目前效果很好。我做过各种基准测试，

.map（）

是最有效的方法

我的问题是，如何在

optgroup

元素中对选项进行分组。我尝试过使用嵌套的

.map（）

，但它仍然会将选项取消分组

JS小提琴

const myoptsar=[
{
标题:"水果",，
价值：[‘苹果’、‘梨’、‘葡萄’、‘啤酒’]
},
{
标题：“动物”，
值：['apple'、'dog'、'mouse'、'cat']
},
//更多
];
设myOpts=`
选择选项
${myOptsArr.map（项=>`
${
item.values.map（itemValue=>`
${itemValue}
`).join（“”）}
;
`).join（“”）}
`;
document.getElementById（'mySelect'）。innerHTML=myOpts；

您需要修复以下问题

• 不是

• 您不需要

  join（）

---

您有语法错误

</optgroup label="${item.title}">${
// change to
<optgroup ...

${
//改为
请描述预期的输出。您正在关闭此标记
${
，而不是打开它。它应该是
${
@PaulBota谢谢！很好的回答。请把它作为答案，我会把它标记为正确。或者我应该删除这个问题，因为它不是逻辑问题？删除它最有可能。我看不出b/w OP的链接和你的链接有什么区别。代码在你的小提琴中不起作用。也可以在上面创建一个可运行的代码段，而不是提供外部链接。@MaheerAli oh只是忘了保存，谢谢你指出更新
</optgroup label="${item.title}">${
// change to
<optgroup ...