Используйте функцию forEach, чтобы добавить элементы option для выбора HTML-элемента. - PullRequest
Новая
       22

Используйте функцию forEach, чтобы добавить элементы option для выбора HTML-элемента.

0 голосов
/ 07 мая 2019

как использовать функцию массива .forEach для итерации по массиву «пользователи» и заполнения элемента SELECT UI элементами OPTION.Каждой ОПЦИИ должно быть присвоено значение идентификатора данного пользователя, а для его отображаемого текста - имя пользователя 

 function displayUsers(users){
    users.forEach((users)=>{
      let sel = document.querySelector('.select-text');
      let opt = document.createElement('option');
      opt.value=users.id;
      let userName=document.createTextNode(users.name);
      opt.appendChild(userName);
      sel.appendChild(opt);


  });
};

Ответы [ 5 ]

1 голос
/ 07 мая 2019

Это то, что вы ищете. 

const displayUsers = (users) => {users.forEach((user) => {
const option = document.createElement("OPTION");
const name = document.createTextNode(user.name);
option.value = user.id;
option.appendChild(name);
document.querySelector('select').appendChild(option);
}
);
};
1 голос
/ 07 мая 2019

попробуйте это: 

function displayUsers(users){
   var sel = document.querySelector('.select-text');
   users.forEach( function(user){

     let opt = document.createElement('option');
     opt.value=users.id;
     opt.innerHTML += user.name
     sel.appendChild(opt);
   });
};

вам лучше объявить один объект select и исключить его из функции forEach

1 голос
/ 07 мая 2019 
array.forEach(()=>{
  select.innerHTML += '<option>hello</option>' 
})

думаю, это поможет

1 голос
/ 07 мая 2019

Мой любимый способ сделать это - использовать Array.prototype.reduce(), это быстрее, чем манипуляции с DOM, и довольно лаконично. 

const targetNode = document.getElementById('users');
const srcArray = [{id: 1, name: 'user1'}, {id: 2, name: 'user2'}, {id: 3, name: 'user3'}];
targetNode.innerHTML = srcArray.reduce((options, entry) => options+=`<option value="${entry.id}">${entry.name}</option>`, '<option value="" selected></option>');
<select id="users"></select>
1 голос
/ 07 мая 2019

Вы должны объявить вашу переменную sel вне цикла. 

function displayUsers(users){
  let sel = document.querySelector('.select-text');
  users.forEach((users)=>{
      let opt = document.createElement('option');
      opt.value=users.id;
      let userName=document.createTextNode(users.name);
      opt.appendChild(userName);
      sel.appendChild(opt);
  });
};

document.addEventListener('DOMContentLoaded', function () {
  displayUsers([{id: 1, name: 'John'}, {id: 2, name: 'Doe'}]);
})
<select class="select-text"></select>
...