Question

I am using elSelect with mootools to change the look and fell of a select box. My problem is how can i call an ajax function when select box value changes?

<script type="text/javascript">
    window.addEvent('domready', function() {
        var mySelect = new elSelect( {container : 'someId'} );
    });
</script>

Thanks in advance

Answer 1

Since elSelect changes the HTML structure to replace the dropdown, you can’t use the change event set on the original dropdown. The documentation doesn’t show any way to bind events to the replaced dropdown.

I’m not at all familiar with the way mootools works, but I notice in the source of the plugin that it has several event handlers defined, among which is onOptionClick. This gets triggered every time the user clicks an option in the dropdown. You can piggyback on top of it – change the code in that function to also trigger your ajax request.

Another option would be analyse the HTML structure of the injected elements – you can start from the id you give the constructor and look for .option elements inside it. You can them poll them for changes at fixed intervals (using setInterval) and send ajax requests when you see the value has changed. Or you can add click handlers to each option and take it from there.