javascript 选择输入事件

javascript select input event

提问by Bogdan

I'm trying to create a select input from javascript and bind a function to when a user changes an option. So far I have:

我正在尝试从 javascript 创建一个选择输入，并在用户更改选项时绑定一个函数。到目前为止，我有：

filter.change = function() {
    console.log("CHANGED");
}

But nothing happens on selecting something else. What is wrong with this code. Also, how can I get the new selected value in the function ? Something like:

但是在选择其他东西时没有任何反应。这段代码有什么问题。另外，如何在函数中获取新的选定值？就像是：

console.log(this.value + "has been selected")

回答by Digital Plane

You were close, you need to use onchange:

你很接近，你需要使用onchange：

filter.onchange = function() {
    alert("CHANGED");
    //You can alert the value of the selected option, using this:
    alert(this.value + " was selected");
}

Of course as Delan said, you should addEventListener(and attachEvent) whenever possible. Example:

当然，正如德兰所说，你应该addEventListener（和attachEvent）尽可能。例子：

//Define a onchange handler:
var changeHandler = function() {
    alert("CHANGED");
    //You can alert the value of the selected option, using this:
    alert(this.value + " was selected");
}
//First try using addEventListener, the standard method to add a event listener:
if(filter.addEventListener)
  filter.addEventListener("change", changeHandler, false);
//If it doesn't exist, try attachEvent, the IE way:
else if(filter.attachEvent)
  filter.attachEvent("onchange", changeHandler);
//Just use onchange if neither exist
else
  filter.onchange = changeHandler;

回答by Felix Kling

If you use this way, the property name is onchange:

如果使用这种方式，则属性名称为onchange：

filter.onchange = function() {
     alert(this.value + "has been selected");
};

Further information:

更多信息：

• MDN - HTMLSelectElement
• quirksmode.org - Traditional event registration model

• MDN - HTMLSelectElement
• quirksmode.org - 传统的事件注册模型

Note:There is also another way to register event handlers, which allows to assign multiple event handlers for the same event. For more information, have a look at quirksmode.org - Advanced event registration models.

注意：还有另一种注册事件处理程序的方法，它允许为同一事件分配多个事件处理程序。有关更多信息，请查看quirksmode.org - 高级事件注册模型。

回答by genesis

if you would use jQuery, you can use it like this

如果你会使用jQuery，你可以像这样使用它

$('select').change(function(){
   alert($('select').val() + ' was just selected');
});

or use .onchange

或使用 .onchange

filter.onchange = function() {
    alert(this.value + " was selected");
}

instead of .change

代替 .change