问题
Possible Duplicate:
Is there a way to determine if a <select> dropdown menu is open?
My customer would like me to display some simple instructions once the user interacts with our <select> element in such a way as to cause the <option> list to drop down (or "drop up", I suppose, since some browsers open upwards if there is not much room beneath the <select> box). And then the instructions should disappear again once the user has either made a new selection and thus caused the option list to disappear, or if they simply close the option list without making a change.
I thought that I was fairly well-experienced with using both CSS/CSS3 selectors and jQuery events to make things like a <div> full of instructions appear and disappear, but for this case I am having trouble figuring out whether there is a way to tell when a <select> box is not merely “active” or “focused” — both of which can be true while the select box is still closed and not displaying its list of options — but actually open. None of the CSS pseudo-selectors or jQuery events that I have tested let me “see”, much less respond to, the state of the open-ness or closed-ness of the <select> box.
Does anyone know how I can set a trigger or write a CSS rule that depends on whether the options list is currently displayed?
回答1:
If $('myID:focus') is not sufficient, I doubt, that there is another way.
回答2:
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 it working here: http://jsfiddle.net/RASG/QfMGR/
tested with FF 15
来源：https://stackoverflow.com/questions/13016276/can-jquery-tell-if-the-options-of-a-select-element-are-currently-displayed