如何为循环生成的多个下拉菜单设置对应选中值？

你需要根据外层循环的索引i，对应arraylist里的元素来设置每个下拉菜单的选中项，而不是让所有在arraylist里的选项都被选中。修改后的代码如下：

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'>";
    // 根据当前循环索引获取要选中的值，索引超出arraylist长度则设为null
    const currentSelected = arraylist[i] || null;
    for (const v of iterable) {
        // 只有当前选项等于currentSelected时才添加selected属性
        let checked = v === currentSelected ? 'selected' : '';
        dropdown += `<option value="${v}" ${checked}>${v}</option>`;
    }
    dropdown += '</select>';
}

关键改动说明 #

• 在外层循环中，新增currentSelected变量，根据当前循环的索引i从arraylist中取出对应要选中的值；当i超过arraylist的长度（比如i=2、3、4时），currentSelected会是null，此时没有选项会被选中。
• 内层循环的checked判断逻辑从arraylist.includes(v)改为v === currentSelected，确保每个下拉菜单只有一个指定的选项被选中，而不是所有在arraylist里的选项都选中。

这样第一个下拉菜单（i=0）会选中Tom，第二个（i=1）选中Joe，剩下的三个下拉菜单没有默认选中项，完全符合你的需求。

内容的提问来源于stack exchange，提问作者ForALLs