2

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:

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")
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
Bogdan
  • 8,017
  • 6
  • 48
  • 64

3 Answers3

11

You were close, you need to use 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:

//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;
Digital Plane
  • 37,354
  • 7
  • 57
  • 59
5

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

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

Further information:

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.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • Of course, one should use `addEventListener` where available. – Delan Azabani Aug 12 '11 at 09:42
  • Why use addEventListener? http://stackoverflow.com/questions/6929528/javascript-difference-event-handlers-listener – js-coder Aug 12 '11 at 09:43
  • @Delan: I would say it depends. If you create a library for sure. If you use it for your own site and don't use any other libraries, this way is easier with respect to all the browser differences. – Felix Kling Aug 12 '11 at 09:45
  • 1
    Well, the most significant benefit of moving away from the traditional event model is being able to easily add and manage multiple function listeners on an object's event. – Delan Azabani Aug 12 '11 at 09:47
  • @Delan: Yes, but this comes with the added complexity of handling the differences between W3C and IE. In a simple setup you just don't need this. But I will make a remark... – Felix Kling Aug 12 '11 at 09:49
2

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

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

or use .onchange

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

instead of .change

genesis
  • 50,477
  • 20
  • 96
  • 125