Does an event fire when a select element is dropped down

Question

I want to know when the element has been dropped down.

I don't want to wait until a value has been selected.

Is there an event I can hook into?

I'm happy to use JQuery/ Javascript to accomplish this

Thanks

UPDATE: Thanks for the suggestions.

focus isn't quite right as it fires when the user tabs into the element;

click meets my needs as (although as @billyonecan says it doesn't fire for a keyboard dropdown) I am only interested in mouse-initiated dropdowns (the bug I'm addressing doesn't happen for keyboard-users).

For the record I am interested in the items being dropped down, not an item being selected.

http://jsfiddle.net/fjqmj/16/ shows a comparison of all the suggestions.

Using the `.on('click')` event instead of the `.click()' event makes the handler reusable for all similar elements on your page (rather than an individual handler for each select element. — JRulle, Jul 17 '14 at 11:58
`click` event won't work if the select is expanded via a keypress (space bar, alt + down etc.) — billyonecan, Jul 17 '14 at 12:00

Bhushan Kawadkar · Answer 1 · 2014-07-17T12:03:45.330

1

try this :

<select id="selectOption">
 <option value="1">One</option>
 <option value="2">two</option>
</select>

jQuery :

$(function(){
  $('#selectOption').focus(function(){
     alert('clicked');
  });
});

Demo

edited Jul 17 '14 at 12:03

answered Jul 17 '14 at 11:49

Bhushan Kawadkar

28,279
5
35
57

This will not work in all cases: If the user makes his choice and decides to select another option it will not fire since the dropdown is already focused. – Eugen Timm Jul 17 '14 at 12:12
@EugenTimm, yes in that case this will not fire. I think OP should comment and tell us what exactly he wants to do with opened drop down. – Bhushan Kawadkar Jul 17 '14 at 12:15
@EugenTimm OP stated they aren't looking for change – charlietfl Jul 17 '14 at 12:16
It depends if that is the desired use case @EugenTimm, the OP's question reads that he wants alerted to when a user enters the select box (focus event) rather than selects an element (which would be the change event) – JRulle Jul 17 '14 at 12:16
I agree that it depends on the use case. My understanding was that OP needed a handler for every time the user opens the dropdown, which is why the suggested solution will not work IMO. – Eugen Timm Jul 17 '14 at 12:18

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

The JQuery focus event will be your best bet: JSFiddle

$('body').on('focus', 'select', function(){ ... });

Reference: why to use .on() instead of .click()

edited May 23 '17 at 10:33

Community

1
1

answered Jul 17 '14 at 11:50

JRulle

7,448
6
39
61

and what if I use keyboard to access it. I'm amazed at how many `click` answers there are – charlietfl Jul 17 '14 at 12:09
agreed... it seems focus is your best bet: `$('body').on('focus', 'select', function(){ ... });` [jsfiddle](http://jsfiddle.net/jrulle/4V7QE/4/) – JRulle Jul 17 '14 at 12:12

Sudha · Accepted Answer · 2014-07-17T12:41:38.600

0

Try this

    <select id="selectOption">
     <option value="1">One</option>
     <option value="2">two</option>
    </select>

$(document).ready(function() {
  $('#selectOption').click(function(){
     alert('clicked');
  });
});

edited Jul 17 '14 at 12:41

answered Jul 17 '14 at 12:07

Sudha

2,078
6
28
53

With the `alert()', the user can never select an option. Without the `alert()`, the event will fire twice (once for select being clicked and once for an option being clicked) – JRulle Jul 17 '14 at 12:09
``$(document).ready(function()`` and ``$(function()`` is the same thing, you should remove one of them – doniyor Jul 17 '14 at 12:36

Does an event fire when a select element is dropped down

3 Answers3