如何设置多个下拉列表的选定值

Question

我正在用相同的数据填充多个下拉列表。

如何为每次迭代设置从下面的数组中选择的值？

const arraylist = ['Tom', 'Joe', 'Bill'];
const iterable = ['Mark', 'Jill', 'Ben', 'John', 'Tom', 'Joe'];
let dropdown = '';
for (let i = 0; i < 5; i++) {
dropdown += "<select name='samedata' class='dropdownlist'>";
for (const [index, v] of Object.entries(iterable)) {
let checked = arraylist.includes(v) ? 'selected' : '';
dropdown += `<option value="${v}" ${checked}>${v}</option>`;
}
dropdown += '</select>';
}

其中第一个下拉列表选择了Tom，第二个下拉列表具有Joe，其余的没有选择。

Answer 1

我必须添加一些额外的代码才能使其工作。首先检查是否为每个<select>迭代找到了"选定"选项，然后检查array.splice()以从arraylist数组中删除该选项。

const arraylist = ['Tom', 'Joe', 'Bill'];
const iterable = ['Mark', 'Jill', 'Ben', 'John', 'Tom', 'Joe'];
let dropdown = '';
for (let i = 0; i < 5; i++) {
let found = false;
dropdown += "<select name='samedata' class='dropdownlist'><option></option>";
for (const [index, v] of Object.entries(iterable)) {
let checked = !found && arraylist.includes(v) ? 'selected' : '';
if (!found && checked) {
arraylist.splice(arraylist.indexOf(v), 1);
found = true;
}
dropdown += `<option value="${v}" ${checked}>${v}</option>`;
}
dropdown += '</select>';
}
document.querySelector('div').innerHTML = dropdown

<div></div>