使用 forEach 函数添加选项元素以选择 HTML 元素答案

【问题标题】：Use the forEach function to add option elements to select HTML element使用 forEach 函数添加选项元素以选择 HTML 元素
【发布时间】：2019-05-07 13:54:16
【问题描述】：

如何使用数组 .forEach 函数迭代“用户”数组并使用 OPTION 元素填充 SELECT UI 元素。每个 OPTION 的值都应设置为给定用户的 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);


  });
};

【问题讨论】：

如果性能对你的应用很重要，我建议修改innerHTML而不是操作DOM，前者可能需要一行简单的代码，最多可以运行40次faster。详情请查看我的回答。
您所拥有的东西是否无法正常工作？

标签： javascript select ecmascript-6 foreach option

【解决方案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)

&lt;select class="select-text"&gt;&lt;/select&gt;

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

【讨论】：

谢谢。不幸的是，我们需要使用 textContent 而不是内部 HTML。
用 textContent 代替 innerHTML 不一样吗？

【解决方案2】：

我最喜欢的方法是使用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, {id,name}) => 
  options+=`<option value="${id}">${name}</option>`, 
  '<option value="" selected></option>');

&lt;select id="users"&gt;&lt;/select&gt;

【讨论】：

最好把它分成几行，因为 OP 显然是 HTML/JS 的初学者。它还使阅读更容易，无需水平滚动。

【解决方案3】：

这就是你要找的。p>

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

【讨论】：

【解决方案4】：

你应该在循环外声明你的变量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'}]);
})

&lt;select class="select-text"&gt;&lt;/select&gt;

【讨论】：

谢谢你！由于某种原因，它没有通过我申请的程序设计的测试条件。不知道为什么。我会继续玩它看看。

【解决方案5】：

array.forEach(()=>{
  select.innerHTML += '<option>hello</option>' 
})

我认为这会有所帮助

【讨论】：

【解决方案6】：

我更喜欢用 JQuery 来做：

data.forEach(function(key,index){
$('#seccion_exp').append(
                         '<option value="'+key.id+'">'+key.nombreSeccion+'</option>'
                  )
 })

data 是我在 PHP 中使用的 JSON 数组，“#seccion_exp”是我给选择的 id，实际上是空的。因此，如果我们使用 dbase 上的字段名称附加选项，您应该能够显示选项并使用 dbase 中的实际值。

这是 HTML 部分：

<div class="form-group">
    <label>Select what you need</label>
         <select class="form-control" id="seccion_exp">
             <option>Choose..</option>
         </select>
</div>

希望这对某人有所帮助。

【讨论】：