Hidden select box doesn't work in Chrome

I have a serious problem with select boxes in Chrome.

I have a hidden DIV with a form containing a SELECT box in it. The DIV is hidden with css "display:none". I then have a button which shows the 开发者_运维问答hidden DIV on click using jQuery: $("#addForm").show()

The problem is, the SELECT box doesn't work when the DIV is shown. :-o I can see the SELECT box, but the default value is empty and when I click the SELECT box, Chrome do highlight it, but the list of OPTIONs doesn't appear.

If I remove the "display: none;" from the CSS, it works. When I then instead hide the #addForm DIV on init and right after show it again, it's the same problem. As if the CSS corrupts the SELECT box somehow.

This ONLY happens in Chrome. :-/

I thought this would be a common issue, but I haven't managed to find any answers to why it happens, nor a solution.

Can anyone please help me?

UPDATE:

In my progress of putting up some code as requested in the comments, I found the bug. :-)

I won't keep you out of it, so here's the code: www.dehold.net/chrome/

The script that apparantly destroyed my select boxes was these two lines:

$("#mee_empId option").attr('selected',false);
$("#mee_conId option").attr('selected',false);

Does anyone have a good solution to do what I'm failing to do correctly?

Why the page doesn't have a Doctype?

I don't know how JQuery sets attributes but selected can never be false. Either the attribute is only present (HTML) or it is set to "selected" (XHTML) or it is absent.

Maybe it was your problem.