jQuery, best way to work with <select>

Question

Hi all.

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

For a select like this:

<select id="item_select" name="item"> 
    <option>Select an Item</option> 
    <option value="1">Item 1</option> 
    <option value="2">Item 2</option> 
    <option value="3">Item 3</option> 
</select>

you do the following:

    <script type="text/javascript"> 

    $(document).ready(function(){ 
        $("#item_select").change(function() 
        { 
// do your stuff

        }); 
    }); 
    </script>

Now, if you don't want to use the id (although every select in your form could just have its individual ID), you can also use any other CSS selector like ("form select:first-child")

Answer 2

You can use the selector "select", like this:

$("select").change(function () {

});

and you can access the select that generated the event using

$(this)

Answer 3

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.