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

时间:2015-03-26 02:11:26

标签: javascript list

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

它必须使用事件监听器。

3 个答案:

答案 0 :(得分:3)

您可以在选择元素上使用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文档。

答案 1 :(得分:0)

“空白测试”这一行不起作用,因为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/

答案 2 :(得分:0)

我在这里解决了您的问题: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);