javascript - 嵌套映射函数

Question

我有一个数组，用于生成一系列选项，这些选项将填充到 html 选择元素中。目前这工作正常。我已经完成了各种基准测试，.map() 是最有效的方法。

我的问题是，如何对 optgroup 元素中的选项进行分组。我尝试过使用嵌套的 .map() 但它仍然使选项未分组。

JS fiddle https://jsfiddle.net/57gbxrzc/

const myOptsArr = [
        {
            title: 'Fruit',
            values: ['apple','pear','grapes','beer']
        },
        {
            title: 'Animals',
            values: ['apple','dog','mouse','cat']
        },
        // more here
    ];

let myOpts = `
    <option value="">Select Option</option>
  ${myOptsArr.map(item => `
        </optgroup label="${item.title}">${
        item.values.map(itemValue => `
                <option value="${itemValue}">${itemValue}</option>
            `).join('')}
        </optgroup>;
  `).join('')}
`;

document.getElementById('mySelect').innerHTML = myOpts;

Answer 1

您需要解决以下问题

• <optgroup>不是</optgroup>
• 您不需要join()

Demo