编辑：

Question

我在HTML中选择了一个选项，我使用了Change事件监听器来触发某些事件。虽然首先触发事件但是第二次选择相同的选项而不重新加载页面不会触发事件。请帮忙

 learnPiano.addEventListener("change",function(){
    console.log(learnPiano.value,'value');
    learn.guidePlaying(learnPiano.value);
  })

Answer 1

change每次都不会开火。只有在实际更改了值时才会触发change。当您选择相同的值时，事件不会发送。

所以，请使用"mouseup" Even Listener。

单击选择仅在实际单击选项时触发。所以我相信它会像你期望的那样工作。

learnPiano.addEventListener("click",function(){
    console.log(learnPiano.value,'value');
    learn.guidePlaying(learnPiano.value);
});

编辑：

由于您的上次评论，我修改了代码以澄清。

您必须在select标记本身上使用"mouseup"。查看此代码段并检查控制台日志中的输出。它在每次测试中都适合我。

你可以完全忽略CSS代码，只是为了便于查看

// i wasn't sure whare lean was so i created a simple object.
// i'm sure you would be able to implement it
var learn = {
  guidePlaying: function(value) {
    console.log("guidePlaying method works");
    console.log(value);
  }
};


select.addEventListener("mouseup",function(){
  
  // this line is decided upon event fire and is the currently selected value
  var selectedValue =  select.options[select.selectedIndex].text;
  
    console.log(selectedValue,'value');
    learn.guidePlaying(selectedValue);
});

select {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 70px;
  font-size: 18px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <select id="select">
      <option value="">Any</option>
      <option value="">kind</option>
      <option value="">of</option>
      <option value="">selection</option>
      <option value="">works</option>
  </select>
  </body>
</html>

Answer 2

更改事件仅在您更改选择时触发。

如果已经选择了一个值＆amp;如果您尝试再次选择相同的值，则不会触发事件。

考虑这个选择

<select id="sel">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

如果在选择'Volvo'之后再次尝试选择'Volvo'，则不会触发事件。

刷新选择选项而不重新加载页面javascript

2 个答案:

编辑：

你可以完全忽略CSS代码，只是为了便于查看