jQuery - Multiple Select Elements On Change Not Working

Question

I am trying to test multiple select boxes each when they change their option. But I can't even get it to pop up an alert message when one of them changes. Here's the code:

<div id="event_date_box">
    <script>
        j('#event_date_box select').change( function() {
            alert('changed');
        });
    </script>

    <select id="event_date_month">
        <option>Jan</option>
        <option>Feb</option>
        ...
    </select>
    <select id="event_date_day">
        <option>1</option>
        <option>2</option>
        ...
    </select>
    <select id="event_date_year">
        <option>2012</option>
        <option>2013</option>
        ...
    </select>
</div>

Also I tried changing the JavaScript to:

j('#event_date_box select').each( function() {
    j(this).change( function() {    
        alert('changed');
    });
});

But the alert window doesn't pop up at all.

Answer 1

Wait for DOM ready:

j(function(){    
    j('#event_date_box select').change( function() {
                alert('changed');
            });
});

Answer 2

You need to use jQuery properly.

    <script>
         $(document).ready(function(){
            $('#event_date_box select').change(function(){
                alert('changed');
            });
         });
    </script>