JQuery - an event handler to determine if an HTML select option has been selected

Question

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

For example, [pseudo-code]:

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

EDIT:

I have the following choice:

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

I try this in jQuery:

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

Nothing happens ... function isn; t triggering.

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

Answer 1

From jQuery docs regarding 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> 

An event handler can be bound to text input in the selection field:

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

Answer 2

Your code works in Firefox with the mouse, see this script .

However, using a keyboard is another matter for this error report.

To get around this, I added a key handler to remove focus from the element, and then re-focused, like this fiddle

If the change event does not fire when using the mouse, check the options displayed by your PHP code. Look for structures that can be "broken" into a select tag.

Answer 3

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

Answer 4

Try to bind:

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

or change function in jQuery:

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

Answer 5

Perhaps there is another tag whose identifier is called "selectattribute". The tag identifier must be unique. If more than one identifier exists, jQuery will use the first based one.

Answer 6

It looks like your jQuery is not loaded, first check 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 '); }