Javascript 无法将函数添加到选项元素

我从一个API中获取了一些数据，在这个API中，我需要获得一个狗的品种，并创建一个显示一些信息的卡片。我在一开始就被卡住了

//Area where data will be displayed
var showcase = document.getElementById('showcase');

var select = document.getElementById('select-bar');

var request = new XMLHttpRequest();

// Get data from API endpoint
request.open('GET', 'https://dog.ceo/api/breeds/list', true);

request.onload = function () {
   var data = JSON.parse(this.response);
   var breeds = data.message;

   if (request.status >= 200 && request.status < 400 ) {
     for (var i = 0; i < breeds.length; i++) {

       var opt = document.createElement('option');
       opt.innerHTML = breeds[i];
       opt.value = breeds[i];
       opt.addEventListener('click', function(){alert('Hey !')})
       select.appendChild(opt);

    }
   }
  }

request.send();

---

对于click事件，这并不是我正在做的最后一个，但我试图表达的一点是，我放在那里的任何功能都不起作用。我在其他元素上都试过了，这是唯一不起作用的元素。帮助？：

您需要使用onchange事件将事件侦听器添加到select节点，而不是每个选项节点

var showcase=document.getElementById'showcase'； var select=document.getElementById'select-bar'； select.addEventListenerchange，functionevent{ 你好； } var请求=新的XMLHttpRequest； //从API端点获取数据 请求。打开'GET'，'https://dog.ceo/api/breeds/list",对,； request.onload=函数{ var data=JSON.parsethis.response； var=data.message； 如果request.status>=200&&request.status<400{ 对于变量i=0；i<0.length；i++{ var opt=document.createElement'option'； opt.innerHTML=品种[i]； opt.value=品种[i]； 选择.appendChildopt； } } } 请求发送；

---

因此，当您从正在创建的下拉列表中更改某个选项时，是否要发出警报？您应该在“选择”中添加该事件，而不是在“选项”中添加该事件。。

select.addEventListener("change", function(event) {
  alert("HELLO");
})