Question

I am dynamically creating the options for a select element using jQuery. Is it possible in jQuery to setup a function to be executed when that option is selected?

I know I can detect the change of the entire select element, but is it possible to specify this on a per-option basis? Maybe something like this:

$('<option />').onselect(function(){

 // do something

});

Edit:
If it’s not possible to specify a function that get’s executed when a specific option is selected, is it possible to bind a function to an element in jQuery? It would make my logic cleaner by allowing me to just simply execute that function assigned to the option in the .change for the select.

Answer 1

You can delegate a change event to the document and attach an event handler to the select element. This allows for runtime manipulation:

$(document).on('change', 'select', function() {
    console.log($(this).val()); // the selected options’s value

    // if you want to do stuff based on the OPTION element:
    var opt = $(this).find('option:selected')[0];
    // use switch or if/else etc.
});

Or if you insist on creating functions for each OPTION, you can do:

$('<option>').data('onselect', function() {
    alert('I’m selected');
});

$(document).on('change', 'select', function(e) {
    var selected = $(this).find('option:selected'),
        handler = selected.data('onselect');
    if ( typeof handler == 'function' ) {
        handler.call(selected, e);
    }
});