Question

我正在尝试使用JavaScript forEach遍历数组对象，然后该函数应创建一个OPTION元素，将其值设置为项目的ID，将其文本设置为项目的名称，然后将OPTION添加到SELECT元素？

我尝试将每一项作为模板文字返回

const currencies = [{
        id: 'USD', name: 'US Dollars'
      },     {    
        id: 'UGX', name: 'Ugandan Shillings'
      },     {
        id: 'KES', name: 'Kenyan Shillings'
      },     {
        id: 'GHS', name: 'Ghanian Cedi'
      },     {
        id: 'ZAR', name: 'South African Rand'
      }];

currencies.forEach(function(currency){    
  str = `<option value="${id}"></option>`   
})

Answer 1

使用jQuery

const currencies = [{ id: 'USD', name: 'US Dollars' }, {
id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }];

currencies.forEach(function(currency){
  $('#list').append(`<option value="${currency.id}">${currency.name}</option>`)
})

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<select id="list"></select>

使用纯JS

const currencies = [{ id: 'USD', name: 'US Dollars' }, {
id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }];

currencies.forEach(function(currency){
  var el = document.getElementById('list');
  var elChild = document.createElement('option');

  // Give the new div some content
  elChild.innerHTML = currency.name;
  elChild.id = currency.id

  // Jug it into the parent element
  el.appendChild(elChild);
})

<select id="list"></select>

Answer 2

const currencies = [{ id: 'USD', name: 'US Dollars' }, { id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }];

$('select').append(currencies.map(c => $(`<option value="${c.id}">${c.name}</option>`)));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select></select>

Answer 3

您必须使用Template literals（用反引号（`）括起来），它允许嵌入表达式：

const currencies = [{ id: 'USD', name: 'US Dollars' }, {
id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }];
var str = '';
currencies.forEach(function(currency){
  str += `<option value=${currency.id}>${currency.name}</option>`;
});

document.getElementById('mySelect').innerHTML = str;

<select id="mySelect"></select>

Answer 4

您可以执行以下操作：

const currencies = [{
  id: 'USD',
  name: 'US Dollars'
}, {
  id: 'UGX',
  name: 'Ugandan Shillings'
}, {
  id: 'KES',
  name: 'Kenyan Shillings'
}, {
  id: 'GHS',
  name: 'Ghanian Cedi'
}, {
  id: 'ZAR',
  name: 'South African Rand'
}];

const selectEl = document.querySelector('#selectEl');
currencies.forEach(function(currency) {
  const option = document.createElement('option');
  option.setAttribute('value', currency.id);
  option.text = currency.name;
  selectEl.appendChild(option);
})

<select id="selectEl">

Answer 5

在这里，您有一种方法可以使用Array::map()和Array::join()：

const currencies = [
  {id: 'USD', name: 'US Dollars'},
  {id: 'UGX', name: 'Ugandan Shillings'},
  {id: 'KES', name: 'Kenyan Shillings'},
  {id: 'GHS', name: 'Ghanian Cedi'},
  {id: 'ZAR', name: 'South African Rand'}
];

let sel = document.getElementById("mySelect");

sel.innerHTML = currencies.map(
  ({id, name}) => `<option value=${id}>${name}</option>`
).join("");

<select id="mySelect"></select>

如何使用forEach遍历Javascript数组对象以创建元素？

5 个答案: