在每个选择标签上添加onfocus，onblur和onchange

Question

我想在页面中添加每个选择标记：

onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'

在头部使用js。

我试过了：

<script>
// onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'

var sels = document.getElementsByTagName("select");
for(var i=0; i<sels.length;i++){
    sels[i].onfocus=function() {
        sels[i].setAttribute("size","10"); 
    }
    sels[i].onblur=function() {
        sels[i].setAttribute("size","1"); 
    }
    sels[i].onchange=function() {
        sels[i].setAttribute("size","1");
        sels[i].blur();
    }
}
</script>

它不起作用。你能帮助我吗？感谢。

Answer 1

您可以使用this引用当前选择元素：

var sels = document.getElementsByTagName("select");
for (var i = 0; i < sels.length; i++) {
    sels[i].onfocus = function () {
        this.setAttribute("size", "10");
    }
    sels[i].onblur = function () {
        this.setAttribute("size", "1");
    }
    sels[i].onchange = function () {
        this.setAttribute("size", "1");
        this.blur();
    }
}

演示：http://jsfiddle.net/7Zrnw/

或者您可以使用立即函数将当前索引i值存储到闭包中。否则，在事件i等于sels.lenght且sels[i]未定义时。

var sels = document.getElementsByTagName("select");
for (var i = 0; i < sels.length; i++) {
    (function(i) {
        sels[i].onfocus=function() {
            sels[i].setAttribute("size","10"); 
        }
        sels[i].onblur=function() {
            sels[i].setAttribute("size","1"); 
        }
        sels[i].onchange=function() {
            sels[i].setAttribute("size","1");
            sels[i].blur();
        }
    })(i);
}

Answer 2

这很有效。您需要使用“this”来引用焦点中的选择。

<script>

var sels = document.getElementsByTagName("select");
for(var i=0; i<sels.length;i++){
    sels[i].onfocus=function() {
        this.setAttribute("size","10"); 
    }
    sels[i].onblur=function() {
       this.setAttribute("size","1"); 
    }
    sels[i].onchange=function() {
        this.setAttribute("size","1");
        this.blur();
    }
}
</script>

Answer 3

更清洁/更有效的方法是使用.each（）迭代和当前迭代的'this'关键字

$('select').each(function (){
  $(this).onfocus = function () {
    this.setAttribute("size", "10");
  }
  $(this).onblur = function () {
    this.setAttribute("size", "1");
  }
  $(this).onchange = function () {
    this.setAttribute("size", "1");
    this.blur();
  }
});