jQuery, best way to work with <select>

Question

What is the best way to catch a < select > change event? I have a form that has different input elements but I want to trigger an event only in the case of a < select > change. I don't want to use the ID since there are a lot of selects on the form.

Many thanks in advance!

Answer 1

If you want only some selects in the page to have the change event, you can add a class to them, like so:

<select class='choose_me'>...</select>

<!-- later on in the page... -->

<select class='choose_me'>...</select>

And then you can catch the change event from any of these by doing something like:

$('select.choose_me').change(function() { .... } );

If you want to select all of them, you can just change your selector to be

$('select').change(function() { });

Inside the function, you can refer to the select elements by using $(this), so a code like this:

$('select.choose_me').change(function() {
    alert($(this).val());
});

Will alert the selected option of any <select> tags with a class of choose_me on change.