使用 forEach 函数将选项元素添加到 select HTML 元素

Question

如何使用数组 .forEach 函数遍历 "users" 数组并使用 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);


  });
};

Answer 1

您应该在循环外声明变量 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>

Answer 2

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

我认为这会有所帮助

Answer 3

我最喜欢的方法是使用 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>');

<select id="users"></select>

Answer 4

试试这个：

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 函数之外

Answer 5

这就是您要找的。

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

Answer 6

我更喜欢 JQuery:

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

data是我在PHP给出的案例中使用的JSON数组，“#seccion_exp”是id我给了select，那个居然是空的。因此，如果我们使用 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>

希望这对某人有所帮助。

使用 forEach 函数将选项元素添加到 select HTML 元素

Use the forEach function to add option elements to select HTML element

javascript

select

ecmascript-6

foreach

option