Javascript在ES6中用json数据填充select（不带jquery）

我有一些json格式的数据要添加到select中

以下是数据：

 {
    "timezones": 
    {
        "country": "Africa",
        "tz": "Africa/Abidjan"
    },
    {
        "country": "America",
        "tz": "America/Anguilla"
    }
}

以下是当前选择：

<select>

    <optgroup label="Africa">
        <option value="Africa/Abidjan">Adak</option>
    </optgroup>

    <optgroup label="America">
        <option value="America/Adak">Anguilla</option>
    </optgroup>

</select>

阿达克
安圭拉

---

如何从json数据填充select，而不是在没有jQuery的情况下对其进行硬编码？

您可以将

appendChild

方法与

.forEach

方法结合使用

let obj={
“时区”：
[{
“国家”：“非洲”，
“tz”：“非洲/阿比让”
},
{
“国家”：“美国”，
“tz”：“美洲/安圭拉”
}]
};
让select=document.getElementById（'countrySelect'）；
对象时区forEach（功能（项）{
让newOptGroup=document.createElement（'optgroup'）；
newOptGroup.label=item.country；
让option=document.createElement（'option'）；
option.value=item.tz；
option.text=item.tz；
newOptGroup.appendChild（可选）；
select.appendChild（newOptGroup）；
});
首先，您认为JSON数据无效。”“时区”应该是一个数组，或者在每个对象上都有一个索引

资料

我将填充以下选项：

data.timeszones.forEach(function(timezone) {
  let optionGroup = document.createElement('optgroup');
      optionGroup.setAttribute('label', timezone.country);

  let option = document.createElement('option');
      option.setAttribute('value', timezone.tz);

  optionGroup.appendChild(option);
  document.getElementById('selectionList').appendChild(optionGroup);
});

显然，不要忘记为元素设置一个ID

<select id='selectionList'>
    <optgroup label="Africa">
        <option value="Africa/Abidjan">Adak</option>
    </optgroup>

    <optgroup label="America">
        <option value="America/Adak">Anguilla</option>
    </optgroup> 
</select>


阿达克
安圭拉
您的对象抛出语法错误。“时区”应该是一个数组，或者每个条目都应该有一个索引。1。现在修复data/JSON，因为它无效。2.为什么使用
元素？会有多个条目吗？3.
s（阿达克，安圭拉）的文本来自哪里？它不在数据中。文本与值不一样（也根本不包括在数据/问题中）@Andreas，我知道，但我给OP提供了如何创建其主要部分的选择元素的解决方案。
<select id='selectionList'>
    <optgroup label="Africa">
        <option value="Africa/Abidjan">Adak</option>
    </optgroup>

    <optgroup label="America">
        <option value="America/Adak">Anguilla</option>
    </optgroup> 
</select>