В Javascript, как мне создать атрибуты данных внутри опций из объекта?

Я работаю над проектом , пусть оружие = [ { типа : "Revolver" , bMats : 60 , CTIME : 50 , }, { типа : "винтовка" , bMats : 100 , CTIME : 70 , }, { типа : «Ружье " , bMats : 120 , cTime : 80 , } ]; некоторое время в свободное время. В настоящее время я пытаюсь сохранить данные для последующего использования.

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

Это небольшой образец всех объектов в массиве. Я использовал следующий код для создания <select id = "wpsl1" > <option> --SELECT ONE-- </ option> <option data-mats = "60 " data-time = " 50 " > Revolver </ option> <option data-mats = " 100 " data-time = " 70 " > Винтовка </ 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" > Винтовка </ 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 " > Револьвер </ option> <option data-mats = " 10 0 " data-time = " 70 " > Rifle </ option> <option data-mats = " 120 " data-time = " 80 " > Shotgun </ option> </ select> s: 

option

В этой области есть 4 варианта, поэтому я просто изменил идентификатор каждого wSelect . appendChild ( новый вариант ( тип оружия [ i ] )); , Часть, которую я не могу понять, заключается в том, как назначить каждому свойству bMats и cTime каждой опции с помощью цикла. Конечный результат должен выглядеть следующим образом: 

select

Если вы предпочитаете, вот вместо jsFiddle:

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

Приветствуется любая информация о том, как действовать. Я долго искал сайт, ища решение. Я, как правило, жарится, когда задаю вопросы, поэтому на этот раз я был лишним.

javascript,

0

Ответов: 1

1

Проблема в том, что вы не изменяете элементы после создания, вы просто добавляете текст во время создания: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

Лучший способ сделать это - использовать ваш массив, чтобы заполнить каждый выбор в его собственном выполнении цикла, таким образом вы можете создать один optionэлемент, установить данные, значение, текст и добавить его в option.

select

Проблема, которую я вижу в этом подходе, заключается в том, что вы не сможете добавлять или удалять selects в будущем без изменения второго параметра в forцикле, поэтому я бы рекомендовал использовать классы для селектора html, чтобы получить возможное количество selects на странице, затем используйте этот массив, чтобы добавить options к каждому 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,
Похожие вопросы
Яндекс.Метрика