在Javascript中，如何从对象在选项中创建数据属性？

我在业余时间一直在做一个项目。我目前正在尝试存储数据以供以后使用

let weapons = [
{
  type: "Revolver",
  bMats: 60,
  cTime: 50,
},
{
  type: "Rifle",
  bMats: 100,
  cTime: 70,
},
{
  type: "Shotgun",
  bMats: 120,
  cTime: 80,
}
];

这是数组中所有对象的一个小示例。我使用以下代码创建选项：

let wSelect = document.getElementById('wpsl1');
wSelect.appendChild(new Option(weapons[i].type));

这个区域有4个选择，所以我只是更改了每个选择的id。我无法理解的部分是如何使用循环将每个bMats和cTime属性分配给每个选项。最终结果应如下所示：

<select id="wpsl1">
     <option>--SELECT ONE--</option>
     <option data-mats= "60" data-time="50">Revolver</option>
     <option data-mats= "100" data-time="70">Rifle</option>
     <option data-mats= "120" data-time="80">Shotgun</option>
</select>
<select id="wpsl2">
     <option>--SELECT ONE--</option>
     <option data-mats= "60" data-time="50">Revolver</option>
     <option data-mats= "100" data-time="70">Rifle</option>
     <option data-mats= "120" data-time="80">Shotgun</option>
</select>
<select id="wpsl3">
     <option>--SELECT ONE--</option>
     <option data-mats= "60" data-time="50">Revolver</option>
     <option data-mats= "100" data-time="70">Rifle</option>
     <option data-mats= "120" data-time="80">Shotgun</option>
</select>
<select id="wpsl4">
     <option>--SELECT ONE--</option>
     <option data-mats="60" data-time="50">Revolver</option>
     <option data-mats="100" data-time="70">Rifle</option>
     <option data-mats="120" data-time="80">Shotgun</option>
</select>

如果您愿意，这里是一个JSFIDLE：

---

请提供有关如何进行的任何信息。我在网站上搜寻了几个星期，寻找解决方案。当我问问题时，我确实会被烤熟，所以这次我是额外的viligant。

问题是，在创建选项元素后，您没有修改它，您只是在创建时将文本添加到选项中：

wSelect.appendChild(new Option(weapons[i].type));

更好的方法是使用your数组在其自己的循环执行中填充每个select，这样可以创建单个option元素，设置数据、值、文本，并将其附加到select

---

可以使用元素访问元素data-*属性。我不访问它们。我正在尝试创建它们。你用同样的方法创建它们，通过访问我的意思是获取或set@PatrickEvans是的，我看过了，但这就是你为每个选项所做的。我试图通过循环将对象属性分配给选择选项。啊，我明白了。谢谢你的回复。我试图修改不存在的数据。当您在参数中使用武器时，引擎如何知道您正在引用武器阵列？我现在可能可以让我的解决方案工作，但你的解决方案要简洁得多。通过querySelectorAll over id访问有什么好处吗？id是唯一的，因此没有好的方法可以匹配所有id并获得你期望的数组，而不创建一个奇怪的循环来获得任何单独的选择并填充数组供以后使用。将ID用于其他目的，如出于特定原因匹配单个元素。您能否详细说明一下为什么在此处使用array.prototype.slice.call？-现在大多数浏览器都实现了querySelectorAll，即本机selectorEngine，许多依赖于框架的开发人员在处理QSA调用的结果时被惊醒：NodeList对象。节点列表类似于数组，但不具有数组提供的许多方法，如forEach、map、filter等-

for (let i = 1; i <= 4; i++) {
  const select = document.getElementById('wpsl' + i)

  weapons.forEach(function(weapon) {
    const option = document.createElement('option')
    option.dataset.mats = weapon.bMats
    option.dataset.time = weapon.cTime
    option.value = weapon.type
    option.text = weapon.type
    select.appendChild(option)
  })
}

<select id="wpsl1" class="weapon-select"> ... </select> // HTML element

const select = Array.prototype.slice.call(document.querySelectorAll('.weapon-select'))

select.forEach(function(select) {
  weapons.forEach(function(weapon) {
    const option = document.createElement('option')
    option.dataset.mats = weapon.bMats
    option.dataset.time = weapon.cTime
    option.value = weapon.type
    option.text = weapon.type
    select.appendChild(option)
  })
})