javascript - Use the forEach function to add option elements to select HTML element - Stack Overflow

admin管理员组

文章数量:1345084

how to use the array .forEach function to iterate over a "users" array and populate the SELECT UI element with OPTION elements. Each OPTION should have its value set to the id of a given user, while its display text should be set to the user's name

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


  });
};

how to use the array .forEach function to iterate over a "users" array and populate the SELECT UI element with OPTION elements. Each OPTION should have its value set to the id of a given user, while its display text should be set to the user's name

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


  });
};

• javascript
• ecmascript-6
• foreach
• html-select

Share Improve this question Follow edited Sep 7, 2022 at 14:11 dan1st 16.6k1717 gold badges102102 silver badges132132 bronze badges asked May 7, 2019 at 13:54 AdebolaAdebola 60911 gold badge88 silver badges1111 bronze badges 2

• If performance matters for your app, I would suggest to modify innerHTML rather than manipulate DOM, the former may take one simple line of code and may operate up to 40 times faster. Check out my answer below for details. – Yevhen Horbunkov Commented May 7, 2019 at 14:14
• Is there something not working with what you have? – Heretic Monkey Commented May 7, 2019 at 15:40

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

try this :

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>

you better declare one the select and put it out of the forEach function

My favorite method to do that is using Array.prototype.reduce() it is faster than DOM manipulation and pretty concise.

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>

This is what you are looking for.

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

You should declare your variable sel outside the loop.

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>

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

i think this will help

I prefer to do it with JQuery:

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

The data is the JSON array I used in my case given by PHP, the "#seccion_exp" is the id I gave to the select, that is actually empty. So if we append the options using the names of the fields on dbase you should be able to display the options and use the actual values from dbase.

This is the HTML part:

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

Hope this help someone.

本文标签： javascriptUse the forEach function to add option elements to select HTML elementStack Overflow