jQuery execute function when option is selected from option object

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);
    }
});

Answer 2

You can use onchange handler to the select:

<select name='numbers' id='numbers'>
  <option value='1' selected='selected'>One</option>
  <option value='2'>two</option>
  <option value='3'>three</option>
  <option value='4'>four</option>
</select>

<script>
  $('#numbers').change(function () { 
    if ($(this).val() === '1'){
      function1();
    }
    if ($(this).val() === '2'){
      function2();
    }
});
</script>

Best Regards

Answer 3

What you can try is binding the change() event on the select element itself. From there, assuming you have a valid function for each option, you can call an individual option's callback:

$('select').change(function() {
  var type = $(this).val();
  switch(type) {
  }

  // Alternatively, you can try this as well:
  $(this).find('option:selected').each(function() {
  });
});