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

我看到的这种方法的问题是，如果不更改select循环中的第二个参数，将来将无法添加或删除for。因此，我建议使用html选择器中的类来获取页面中可能的select数量，然后使用该数组将option添加到每个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)
  })
})

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

1 个答案: