jQuery / Javascript旋转下拉菜单

Question

I need a dropdown menu to appear rotated 90 deg anticlockwise - so that the dropdown select "button" text appears vertically, and then the options slide out likewise in a rotated, sideways way, with vertical text. (Context: The user needs to select a title from a number of options for the Y axis of a graph - and the dropdown needs to exist where the title will finally go, likewise rotated.)

html currently simply as follows:

<select id="title"  >
<option value="title-0">Choose a chart title</option>
<option value="title-1">title 1</option>
<option value="title-2">title 2</option>
<option value="title-3">title 3</option>
</select>

I know there is CSS3 stuff for this. I've referred already to: Need Jquery code for rotate a whole div So I've tried CSS like so, or similar:

.box_rotate {
-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(90deg);  /* FF3.5+ */
-ms-transform: rotate(90deg);  /* IE9 */
-o-transform: rotate(90deg);  /* Opera 10.5 */
transform: rotate(90deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand');
zoom: 1;
}

What happens is - at least in Firefox 15 - the select "button" gets rotated, but the dropdown options, when the menu is activated, remain in the horizontal position they would otherwise be - (and the dropdown links don't work).

I have tried applying the rotate class separately to the option tags, or to the select tag, or to an all-enclosing div. None of that seems to fix things.

There are, apparently, "a lot of plugins that are able to add rotate support to jQuery." (according to previously mentioned SO question). The one's I've seen just seem to apply to images or simple div elements - nothing that actually works for a whole dropdown menu.

Any ideas? .. A Javascript/jquery solution would be prefered.

Thanks

Answer 1

这是一个浏览器错误： https : //bugzilla.mozilla.org/show_bug.cgi?id=455164

Answer 2

it seems it works on FX15 when the rotation effect is applied to an optgroup element,

http://jsbin.com/ifatiy/1/edit

<select>
    <optgroup>
       <option value="title-0">Choose a chart title</option>
       <option value="title-1">title 1</option>
       <option value="title-2">title 2</option>
       <option value="title-3">title 3</option>
    </optgroup>
</select>

but you may need to also specify an height (and reset the style introduced with optgroup)