Question

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

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

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

Answer 2

您遇到语法错误

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

嵌套地图功能

2 个答案: