How can I detect in jQuery when any option in a select tag has been changed?

For example [pseudocode]:

event handler function -> option changed(){      
  //do some stuff
}

EDIT:

I have the following select:

<select id = "selectattribute">
  <OPTION VALUE="0">Choose Attribute</OPTION>
  <?php echo($options);?>
</select>

I am trying this in jQuery:

$(document).ready(function() {
  $("#selectattribute").change(function() {
     alert('Handler for .change() called.');
  });
});

Nothing happens...the function isn;t triggering.

EDIT: it works when I use $("#select") instead of $("#selectattribute")...can you not apply it to particular select tags?

How can I detect in jQuery when any option in a select tag has been changed?

For example [pseudocode]:

event handler function -> option changed(){      
  //do some stuff
}

EDIT:

I have the following select:

<select id = "selectattribute">
  <OPTION VALUE="0">Choose Attribute</OPTION>
  <?php echo($options);?>
</select>

I am trying this in jQuery:

$(document).ready(function() {
  $("#selectattribute").change(function() {
     alert('Handler for .change() called.');
  });
});

Nothing happens...the function isn;t triggering.

EDIT: it works when I use $("#select") instead of $("#selectattribute")...can you not apply it to particular select tags?

• javascript
• jquery
• html
• event-handling

• You attach a listener to the select element for the change event. You can use jQuery (or any of a number of libraries), or a few lines of plain script, or an in-line handler. – RobG Commented Aug 23, 2011 at 0:40
• @RobG: You really shouldn't propose inline-handler... – Saxoier Commented Aug 23, 2011 at 1:47
• have you tried different browsers? – Jon P Commented Aug 23, 2011 at 2:02
• @Saxoier - you really shouldn't express opinions in a technical forum without providing sound technical reasons for them. – RobG Commented Aug 23, 2011 at 3:50
• 1 @RobG: With your high score and most answers tagged with 'JavaScript' you should know that you should not mix HTML with inline JS and inline CSS because these files are hard to maintain (distinguish content and visual presentation). You can read it in many answers. – Saxoier Commented Aug 23, 2011 at 10:46

6 Answers 6

From jQuery docs regarding the change handler:

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

The event handler can be bound to the text input and the select box:

$('.target').change(function() {
  alert('Handler for .change() called.');
});

Your Code works in Firefox using the mouse, see this fiddle.

However using the keyboard is a different matter as per this bug report

To work around this I've added a key up handler to remove focus from the element then re-focus, as per this fiddle

If the change event is not triggering when using the mouse, check the options rendered by your php code. Look for structures that might be "breaking" the select tag.

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

Maybe there is another tag which id is named "selectattribute".The tag id should be unique.If there is more than one id,jQuery will use the first one founded.

Try bind:

  $("#selectattribute").bind('change', function() {
     alert('Handler for .change() called.');
  });

or change function in jQUery:

  $("#selectattribute").change(
     function() {
        alert('Handler for .change() called.');
     }
  ); 

Looks like your JQuery is not loaded,check first that it is loaded

    //case if mini jQueryis not used replace with window.jQuery
    if (window.$) {
    console.debug('jQuery is loaded ');
    } else {
    console.debug('jQuery is not loaded ');
    }