如何在之后提醒 map() 值<option>的<select>已使用 Javascript 选择标签？

Question

我的任务是使用地图来存储 5 名学生的姓名及其相应的平均成绩。 我已使用虚构的硬编码名称和等级初始化此地图，如下所示：

const avgGrade = new Map();

avgGrade.set('Kyle', '82%');
avgGrade.set('Sarah', '50%');
avgGrade.set('Skye', '96%');
avgGrade.set('Taylor', '75%');
avgGrade.set('Bantu', '98%');

我的目标是编写 JavaScript 以在下拉菜单中显示每个学生的姓名。 当从下拉菜单中选择学生的姓名时，应使用警报显示学生的成绩。 这些是我得到的提示（提示：请记住，您可以使用元素的 value 和 innerHTML 属性。）

我试过这样做，但有些事情我没有做对。 有人可以告诉我我哪里出错了。 这是我的代码：

//dropdown menu using a for loop 

let dropdown = document.querySelector('#dropdown');
for (i=0; i<avgGrade.length; i++){
let option = document.createElement('option');
option.innerHTML = avgGrade.keys();
dropdown.appendChild(option);
}

//also,I to just alert like this:
function studentGrades()//called the function in select tag on the DOM using the onchange event
{
alert( Select.options[selectedIndex].value + ' average grade is ' + avgGrade.values[i]);
}

Answer 1

您必须确保正确地迭代Map 。 您可以为此使用forEach() 。 要插入您的options请同时提供text和value 。

您的代码中未定义Select 、 i 、 selectedIndex等变量。

要从Map获取值，请使用标准 Map 方法，例如get() 。

 const avgGrade = new Map(); avgGrade.set('Kyle', '82%'); avgGrade.set('Sarah', '50%'); avgGrade.set('Skye', '96%'); avgGrade.set('Taylor', '75%'); avgGrade.set('Bantu', '98%'); let dropdown = document.querySelector('#dropdown'); avgGrade.forEach((val, key) => { let option = document.createElement('option'); option.text = key; option.value = key; dropdown.appendChild(option); }); //also,I to just alert like this: function studentGrades(select) { //called the function in select tag on the DOM using the onchange event alert(select.value + ' average grade is ' + avgGrade.get(select.value)); }

 <select id="dropdown" onchange="studentGrades(this)"> </select>

我冒昧地this作为 onChange 的论据传递。 你可能正在以其他方式做这件事。