Detect if an HTML select element is expanded (without manually tracking state)

Question

I\'d like to detect if a drop down is expanded or not. I don\'t want to use extra event handlers for click/mouseover etc because the drop-downs are dynamic and for other rea

Answer 1

How about when it's got focus, even if it isn't expanded? You specifically ask for expanded because you don't want to override default browser behaviour, but the browser behaviour should be to scroll through the items when the item is focussed, even if it isn't expanded, so I would say you'd be better off detecting focus.

If you're okay with that, then you can certainly easily detect when a field has focus and when it loses it, by using the JQuery focus() and blur() methods, or focusin() and focusout().

http://api.jquery.com/focus/ and http://api.jquery.com/blur/

http://api.jquery.com/focusin/ and http://api.jquery.com/focusout/

Hope that helps.

Answer 2

Maybe you could do something like this:

$('#dropdown').live('click', function(){
    //bind mousewheel here
});

$('#dropdown').live('change', function(){
    //unbind mousewheel here
})

Answer 3

I looked into this before, for similar reasons. I could never find a solution other than trying to track it manually which really doesn't work. There are several ways to open/close a select (drop down) such as Alt+Dn Arrow. An open select will close if the user clicks on something outside the browser. Trying to keep track of the state of the select is an exercise in futility. Unless someone else comes along with something I missed on my hunt, you'll have to code around it as elegantly as you can.