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

Posted 2023-02-23

【中文标题】在下拉 javascript eventlistener 中选择时触发事件

【英文标题】：Trigger event when selecting in a dropdown 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);

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

【参考方案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) 部分。