How to collapse a select-box when it's expanded in chrome/safari?

Question

I have a requirement where-in I have to collapse a select-box when user hovers on a link.

My code seems to be working on FF and IE, but not on Safari and Chrome. Here's the simplified version of it.

Please advise what am I missing?

Edit: Thanks Rob for pointing this out. When I said "I have to lose focus", I meant was, "I have to collapse the select box and move the focus out/blur".

Edit: I guess my question and summary was not correct/misleading. I have tried to reword it, to show my requirement/issue. Anyways, here's what I have now. It's a hack, but it seems to be working on Chrome as well now, however Safari is still playing hard to get. Any advices?

It works fine, unless the select box is expanded. – Rob W Jun 25 '12 at 09:05 — Rob W, Jun 25 '12 at 09:05
it works fine. for your demo atleast. – Zahid Riaz Jun 25 '12 at 09:08 — Zahid Riaz, Jun 25 '12 at 09:08

score 1 · Answer 1 · edited May 23 '17 at 11:49

I'm guessing this is way past your need for this, and it's not a "good" solution, but in case anyone happens upon this. I was able to get it to work in Chrome with your existing code only by hiding the select on hover of the link, then showing it again when the mouse leaves (I didn't try Safari).

http://jsfiddle.net/52enE/

There's another solution to create a dummy select, but it was reported as not working in the latest chrome at the time:

Close a SELECT dropdown list programatically with Javascript/jQuery

Since the browser controls the select and how form elements are viewed there's probably no good way around this...the "best" (still not good) solution would probably be to use a custom input that acts like a select but can be fully controlled with a hide() call...or find a way to change the requirements :)

How to collapse a select-box when it's expanded in chrome/safari?

1 Answers1