Geek Answers Handbook

Can jQuery indicate whether the <option> s element of the <select> element is currently displayed?

Possible duplicate:
Is there a way to determine if the <select> dropdown menu is open?

My client would like me to display some simple instructions when the user interacts with our <select> element so that the <option> list falls out (or "pops up," I suppose, as some browsers open up if the <select> box <select> not much space). And then the instructions should disappear again as soon as the user either makes a new choice, and thus leads to the disappearance of the list of options or simply closes the list of options without making any changes.

I thought that I was pretty good at using CSS / CSS3 selectors and jQuery events so things like <div> instructions would appear and disappear, but for this case it’s hard for me to understand if there is a way to indicate when the <select> field is not just “active” or “focused” - both of them can be true as long as the selection field is still closed and does not display its list of parameters, but actually opens. None of the CSS pseudo-selectors or jQuery events that I tested allow me to "see", much less react to the state of openness or closedness of the <select> window.

Does anyone know how I can set a trigger or write a CSS rule that depends on whether a list of options is currently being displayed?

+7
source share
2 answers

If $('myID:focus') not enough, I doubt there is another way.

0
source

something like

HTML

 <select id="sselect"> <option value="1st">1st</option> <option value="2nd">2nd</option> <option value="3rd">3rd</option> </select> <br><br> <div id="ddiv"></div>

Js

 $('#sselect') .on('keyup', function() { $('#ddiv').show().text($(this).val()) }) .on('mouseenter', 'option', function() { $('#ddiv').show().text($(this).val()) }) .on('mouseleave', function() { $('#ddiv').hide() })

see here: http://jsfiddle.net/RASG/QfMGR/

tested with FF 15

0
source

More articles:


All Articles