javascript - 使用forEach函数添加option元素来选择HTML元素

Question

如何使用数组 .forEach 函数迭代“users”数组并使用 OPTION 元素填充 SELECT UI 元素。每个选项的值应设置为给定用户的 ID，而其显示文本应设置为用户名

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


  });
};

Answer 1

试试这个:

function displayUsers(users) {
  var sel = document.querySelector('.select-text');
  users.forEach(user => {
    let opt = document.createElement('option');
    opt.value = users.id;
    opt.textContent += user.name // or opt.innerHTML += user.name
    sel.appendChild(opt);
  });
};

const users = [{
  name: "Foo"
}, {
  name: "Bar"
}]

displayUsers(users)

<select class="select-text"></select>

你最好声明一个 select 并将其放在 forEach 函数之外