how to bind onchange event defined in a select menu in jquery call function?

Question

i'm trying to implement clone select menu using the following plugin:

https://github.com/afEkenholm/ScrollectBox

https://github.com/afEkenholm/ScrollectBox/blob/master/index.html

https://github.com/afEkenholm/ScrollectBox/blob/master/js/ScrollectBox/jquery.scrollectbox.js

but i'm unable to bind onchange event defined in the following select menu in jquery call function.

    <select onchange="function(this);" id="selector" class="selection" >
    <option value="" selected="Select Topic">Select Topic</option> 
    <option value="Food">Food</option>
    <option value="Drink">Drink</option>
    </select>

how can i bind onchange="function(this);" in the following call function?

<script type="text/javascript">
jQuery(document).ready(function($){ 
   $(".selection").scrollectBox({
    preset: 'dropdown',
    numVisibleOptions: 4,
    scrollInterval: 150, 
    scrollOn: 'hover'
    });
});
</script>

thanks,

Answer 1

Use chaining in jQuery.

$(".selection").scrollectBox({
    preset: 'dropdown',
    numVisibleOptions: 4,
    scrollInterval: 150, 
    scrollOn: 'hover'
}).on('change', function() {
    // this
});