jQuery detect when user uses SELECT element in form

Question

I want to be able to detect when the user has selected an option from a SELECT element in a form. I know what to do from there, but not sure about how to achieve the initial detection.

<select id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

I would like the solution in JQuery if possible.

Nick Craver · Accepted Answer · 2010-09-30 15:23:39Z

4

You probably want the .change() handler, like this:

$("#mySelect").change(function() {
  var newVal = $(this).val();
  //do something
});

.val() gets the current value of the dropdown (as a string), just use that to do whatever you want, e.g. alert("The new value is: " + $(this).val());, etc.

edited Sep 30, 2010 at 15:23

answered Sep 30, 2010 at 14:57

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

2 Comments

diggersworld Over a year ago

Cool thanks. PS... I think you meant "var newVal = $(this).val();"

MonkeyZeus Over a year ago

I know this is quite late but if you are using the keyboard (tabbing) to navigate a form and use the up/down arrows to choose from a dropdown list then FireFox (22.0) does not trigger the change event. You need to additionally bind keypress for FireFox. Additional Info: jQuery 1.10.2 using the syntax $('select').on('change', function(){ /* do seomthing */ });

Josh K · Accepted Answer · 2010-09-30 14:56:51Z

1

$("#mySelect").bind("change", function(event){ ... });

answered Sep 30, 2010 at 14:56

Josh K

28.9k20 gold badges89 silver badges132 bronze badges

Comments

melaos · Accepted Answer · 2010-09-30 14:57:49Z

1

or just use

$("#mySelect").change(function(){
  //do something here
})

answered Sep 30, 2010 at 14:57

melaos

8,4385 gold badges61 silver badges95 bronze badges

Comments

clifgriffin · Accepted Answer · 2010-09-30 14:57:38Z

0

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

answered Sep 30, 2010 at 14:57

clifgriffin

2,0533 gold badges22 silver badges41 bronze badges

Comments

Praveen Prasad · Accepted Answer · 2010-09-30 15:05:21Z

0

jQuery('#mySelect').bind('change',function(e){

        //value of selected item
        var _selectedValues=jQuery(this).val();

        //your codes  here
});

i prefer bind over .change(),. click(), etc: as bind is more generic than others.

answered Sep 30, 2010 at 15:05

Praveen Prasad

32.2k20 gold badges77 silver badges106 bronze badges

Collectives™ on Stack Overflow

jQuery detect when user uses SELECT element in form

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related