Get value from FancySelect mootools

Question

I was created a dropdown with mootools FancySelect.but i dont know how to get its value to a variable when the value is changed.

HTML

   <select name="fruits" id="fruits">
     <option value="1" data-image="http://www.lorenzostanco.com/lab/demos/FancySelect/Graphics/Fruits/Apple.png">Apple</option>
     <option value="2" data-image="http://www.lorenzostanco.com/lab/demos/FancySelect/Graphics/Fruits/Banana.png">Banana</option>
   </select>

Javascript

        var $$=document.id;
        $$('fruits').fancySelect();

I try to get the value with jQuery.as follows

  $('#fruits').change(function(){
         alert($this).val())
  });

But it is fire an error,element is undefined.

FIDDLE

Answer 1

This fancySelect that Lorenzo did has a option for legacyEvents.
Turning that on fixes your problem.

Try this:

var $i = document.id;
$i('fruits').fancySelect({legacyEvents: true}); // note here i added {legacyEvents: true}
$i('fruits').addEvent('change', function () {
    alert(this.get('value'));
});

Demo

Note: Don't do var $$=document.id; you are overriding a mootools method which is $$. You can do $i istead.