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