在下拉列表javascript eventlistener中选择时触发事件

Question

我有这个javascript函数，

function listQ(){
 var e = document.getElementById("list");
 if(e.selectedIndex > 0){
  if("Blank Test" === e.selectedIndex){ alert("yo"); }
 }
}

我的问题是如何在选择相同的下拉列表值时触发该功能？

我试过这段代码，

document.getElementById("list").addEventListener("change",listQ);

它必须使用事件监听器。

Answer 1

您可以在select元素上使用onchange方法。

var changedText = document.getElementById('changed');
function listQ(){
    changedText.textContent = this.value;
}
document.getElementById("list").onchange = listQ;

对于这个HTML

<select id="list">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>
<p>
  Your value <spam id="changed"></spam>
</p>

这是Fiddle分叉的Jonathan，这里是change事件的MDN文档。

Answer 2

“空白测试”这一行不起作用，因为e.selectedIndex将成为一个索引（一个数字）。你可以使用e.options[e.selectedIndex].value

除此之外，只需将事件监听器更改为“click”而不是“change”：

<select id="list">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="Blank Test">Four</option>
</select>

<script type="text/javascript">
  function listQ(){
    var e = document.getElementById("list");
    if(e.selectedIndex > 0){
      if("Blank Test" === e.options[e.selectedIndex].value){ alert("yo"); }
    }
  }
  document.getElementById("list").addEventListener("click",listQ);
</script>

这是一个小提琴演示：https://jsfiddle.net/h81pcpm0/

Answer 3

我在这里解决了你的问题：https://jsfiddle.net/evL4cc5q/

var lastIndex = "";
function listQ(){
    var e = document.getElementById("list");
    if(e.selectedIndex > 0){
        if(e.selectedIndex != lastIndex) {
            if("Blank Test" === e.options[e.selectedIndex].value)
                alert("yo");
            lastIndex = e.selectedIndex;
        }
        else {
            lastIndex = "";
        }
     }
}
document.getElementById("list").addEventListener("click",listQ);