jQuery - event handler to detect if HTML select option has been selected

Question

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?

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
– RobG, Commented Aug 23, 2011 at 0:40
@Saxoier - you really shouldn't express opinions in a technical forum without providing sound technical reasons for them. — RobG
– RobG, Commented Aug 23, 2011 at 3:50
@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
– Saxoier, Commented Aug 23, 2011 at 10:46

Jon Adams · Accepted Answer · 2011-08-23 00:29:17Z

8

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.');
});

answered Aug 23, 2011 at 0:29

Jon Adams

25.3k18 gold badges85 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user906568 Over a year ago

Hi I saw that and implemented it but it isn;t working...see my edited post

Jon Adams Over a year ago

It should be working according to the code you posted in your edit. See the fiddle link by "Jon P" in another answer here. Your posted code works when isolated. So it's possible you have other things in the rest of the page that is messing it up--you may have to post the whole page HTML. Are you using the id name more than once? Are there any JavaScript errors in the console?

Jon P · Accepted Answer · 2011-08-23 03:58:32Z

2

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.

edited Aug 23, 2011 at 3:58

answered Aug 23, 2011 at 2:08

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

1 Comment

Dennis Braga Over a year ago

...quite solid answer. Congrats.

Praveen · Accepted Answer · 2013-08-20 11:30:31Z

1

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

edited Aug 20, 2013 at 11:30

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

answered Aug 23, 2011 at 0:28

cpjolicoeur

13.1k7 gold badges50 silver badges60 bronze badges

1 Comment

cpjolicoeur Over a year ago

you need to look at the docs for jquery selectors $("select") would select all <select> tags. $("#select") would select all dom elements with an id='select' attribute. To get only the select dom element you want, use its dom id in the selector

wukong · Accepted Answer · 2011-08-23 03:22:22Z

0

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.

edited Aug 23, 2011 at 3:22

answered Aug 23, 2011 at 2:17

wukong

2,6272 gold badges28 silver badges35 bronze badges

Comments

radu florescu · Accepted Answer · 2012-02-07 19:13:49Z

0

Try bind:

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

or change function in jQUery:

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

edited Feb 7, 2012 at 19:13

radu florescu

4,36310 gold badges64 silver badges95 bronze badges

answered Aug 23, 2011 at 2:12

jerjer

8,77634 silver badges36 bronze badges

Comments

0xFK · Accepted Answer · 2013-10-31 03:32:44Z

0

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 ');
    }

answered Oct 31, 2013 at 3:32

0xFK

2,76835 silver badges25 bronze badges

Collectives™ on Stack Overflow

jQuery - event handler to detect if HTML select option has been selected

6 Answers 6

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related