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

Question

业余时间我一直在从事一个项目。 我目前正在尝试存储数据以备后用。

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>

如果您愿意，可以改用jsFiddle：

https://jsfiddle.net/wm5z9s7r/15/

任何有关如何进行的信息表示赞赏。 我在网站上搜寻了数周以寻找解决方案。 当我问问题时，我确实很容易被烤，所以这次我更加机敏。

Answer 1

问题在于，您没有在创建option元素后对其进行修改，而只是在创建时在option中添加了文本：

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

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

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)
  })
}

我看到的这种方法的问题是，如果不更改for循环中的第二个参数，将来将无法添加或删除select s，因此，我建议对html选择器使用类以获取可能的数字的select在页面S，然后使用数组添加option s到每一个select 。

<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)
  })
})