在下拉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

您可以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>

这是从Jonathan分叉的Fiddle，这是更改事件的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/