Change event on <select>

Question

If i attach a change event listener on a<select> how do i acces the option that was selected (not just the value, the actual element).

$('select').addEvent('change',function(event) {
    //??
});

Note: i'm using Mootools

Answer 1

There is no event object property. Just access the selectedIndex property on the select element (this object in the event handler) to get the option index.

// get the index of the selected option
var index = this.selectedIndex;

// get the option element
var opt   = this.options[index];

Answer 2

Either of these will work:

find by :selected pseudo selector in descendants

this.getElement(':selected');

get first selected value

this.getSelected()[0];

pure javascript, use the selectedIndex property

this.options[this.selectedIndex];