使用 forEach 函数将选项元素添加到 select HTML 元素
Use the forEach function to add option elements to select HTML element
如何使用数组 .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);
});
};
您应该在循环外声明变量 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>
array.forEach(()=>{
select.innerHTML += '<option>hello</option>'
})
我认为这会有所帮助
我最喜欢的方法是使用 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>
试试这个:
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 函数之外
这就是您要找的。
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);
});
};
我更喜欢 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 函数遍历 "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);
});
};
您应该在循环外声明变量 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>
array.forEach(()=>{
select.innerHTML += '<option>hello</option>'
})
我认为这会有所帮助
我最喜欢的方法是使用 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>
试试这个:
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 函数之外
这就是您要找的。
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);
});
};
我更喜欢 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>
希望这对某人有所帮助。