在下拉 javascript eventlistener 中选择时触发事件答案

【问题标题】：Trigger event when selecting in a dropdown javascript eventlistener在下拉 javascript eventlistener 中选择时触发事件
【发布时间】：2015-05-29 23:12:23
【问题描述】：

我有这个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);

而且它必须使用事件监听器。

【问题讨论】：

标签： javascript list

【解决方案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 <span id="changed"></span>
</p>

这是从 Jonathan 派生的 Fiddle，这是 change 事件的 MDN 文档。

【讨论】：

将 spam 更改为 span 哈哈
谢谢@Antoni！

【解决方案2】：

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

除此之外，只需将事件侦听器更改为“单击”而不是“更改”：

<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>

这里有一个 Fiddle 来演示：https://jsfiddle.net/h81pcpm0/

【讨论】：

每次点击下拉菜单都会触发事件。
没有别的办法了吗？
对不起 - 我以为这就是你要找的东西。你想要什么？也许您只想在值未更改时触发？
我想要的是，当用户在下拉列表中选择一个选项时。如果他/她选择“空白测试”，所有数据都将被删除。如果他/她选择了“个人”之类的其他选项，则会更改数据。如果他/她选择空白测试并输入数据，然后再次选择空白测试，数据将被删除。但如果他/她选择了其他，数据将会改变。

【解决方案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);

【讨论】：

lastIndex 等于 " "。这样它就不会执行 if(e.selectedIndex > 0) 部分。