问题描述
我正在尝试使用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>`
})
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>
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>
3楼
您必须使用允许嵌入表达式的 （用反引号（`）括起来）：
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>
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">
5楼
在这里，您有一种方法可以使用和 ：
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>