如何向下拉列表中的名称添加点击事件，以显示在警报中点击的学生的成绩。一直很痛苦，请谢谢

Posted 2023-02-14

【中文标题】如何向下拉列表中的名称添加点击事件，以显示在警报中点击的学生的成绩。一直很痛苦，请谢谢

【英文标题】：How do i add a click event to the names in the dropdown list to display the grade of the student clicked on in an alert. It has been a pain , pls thax

【发布时间】：2022-01-16 22:15:22

【问题描述】：

这是主 html 页面，任务是创建一个包含学生姓名的下拉列表，点击后应在警告框中显示他们的成绩。这是一个我正在重新审视我的成绩的项目，即使在学习了更多之后，我仍然在努力获得最终的代码。 //HTML 任务2

javascript

这是地图的创建

    let avrGrades = new Map()
    
    avrGrades.set("Jade", 90)
    avrGrades.set("Vel", 88)
    avrGrades.set("Sky", 60)
    avrGrades.set("Rian", 70)
    avrGrades.set("Lizz", 90)
    

我在这里运行了一个测试循环来查看是否正在读取键值对。

    for(let [key, value] of avrGrades)
        console.log(key + " " + value)
    

说实话，创建下拉列表非常简单。

    for(let key of avrGrades.keys())
        let classList = document.getElementById("classList")
        //Creating an id attribute
        let att =document.createAttribute("id")
        att.value = "option"
        //Creating the option Element
        let listItem = document.createElement("option")
        //Adding the attribute to the option element
        listItem.setAttributeNode(att)
        listItem.innerHTML = key
        classList.appendChild(listItem)
       
    

这会在点击时播种等级，这就是我正在苦苦挣扎，我尝试了一些东西，但没有任何效果。

    let show = document.getElementById("option")
    show.addEventListener("click", function()
        for(let value of avrGrades.values())
            alert(value)
        
    
    )

【参考方案1】：

我这样调整你的代码：

const avrGrades = new Map();
const classList = document.getElementById("classList");

avrGrades.set("Jade", 90)
avrGrades.set("Vel", 88)
avrGrades.set("Sky", 60)
avrGrades.set("Rian", 70)
avrGrades.set("Lizz", 90)


for (const key of avrGrades.keys()) 
  const listItem = document.createElement("option")
  listItem.innerHTML = key
  classList.appendChild(listItem)


classList.addEventListener("change", function() 
  alert(avrGrades.get(classList.options[classList.selectedIndex].text))
)

<select id='classList'></select>

您尝试使用多个相同的id，但ID 必须是唯一的，我简单地使用所选选项的文本来使用.get 并提醒等级值

参考：

Map HTMLSelectElement.selectedIndex

【讨论】：

你测试我的代码了吗？

【参考方案2】：

如果您为每个选项指定一个唯一 ID，您的初始代码应该可以工作。目前你有

let att =document.createAttribute("id")
att.value = "option"

所以每个选项都有相同的 ID option。尝试为每个 ID 使用独特的东西，例如 option-key，并为每个 ID 设置点击。

您还可以通过使用类名而不是 ID 定位元素来消除此 ID 问题

let shows = document.getElementsByClassName("option")
for (var i = 0; i < shows.length; i++) 
    shows[i].addEventListener('click', [your function]);

假设你给这些元素一个名为option的类