如何為多個下拉菜單設置選定值

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 ，rest 沒有選擇任何內容。

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>