I there ANY way in javascript that we could trigger a select element (dropdown list) to open (i.e. drop)?

After searching alot on the web, it seems the answer to this question is no, but I decided to give it a try on here as well.

I know there are some css tricks that you can set the opacity of your select to 0 and place it over other elements to receive click, but that is not useful in my case.

Also there are tons of js APIs that bring the same dropdown functionality to browsers but they are not good solutions for me because then on mobile browsers (where the OS has a totally different mobile-friendly popup for dropdowns) the functionality would be seriously poor.

[Note] I specifically need to do this in an android browser, in case there is a hack for this special case.

Thanks.

I there ANY way in javascript that we could trigger a select element (dropdown list) to open (i.e. drop)?

After searching alot on the web, it seems the answer to this question is no, but I decided to give it a try on here as well.

I know there are some css tricks that you can set the opacity of your select to 0 and place it over other elements to receive click, but that is not useful in my case.

Also there are tons of js APIs that bring the same dropdown functionality to browsers but they are not good solutions for me because then on mobile browsers (where the OS has a totally different mobile-friendly popup for dropdowns) the functionality would be seriously poor.

[Note] I specifically need to do this in an android browser, in case there is a hack for this special case.

Thanks.

• javascript
• android
• mobile

• What do you mean by put it over? do you have a pictorial representation? – Naftali Commented Jan 26, 2012 at 18:12
• I'm just explaining that there are some css3 tricks but not useful -> I have to use js to open it. – Mo Valipour Commented Jan 26, 2012 at 18:13
• Ummm, maybe dynamically set the multiple attribute to turn it into a listbox, then when someone selects and item, remove that attribute? But this is a bad road to go down. Adjust your requirements - your users are capable of hitting their own dropdown. – Adam Rackis Commented Jan 26, 2012 at 18:13
• Do you have to use a true <select> element? This could certainly be acplished with a custom select-like control if you weren't opposed to reinventing the wheel. – FishBasketGordo Commented Jan 26, 2012 at 18:15
• @AdamRackis and FishBasketGordo: see my new ments in the question. – Mo Valipour Commented Jan 26, 2012 at 18:19

1 Answer 1

You could assign a value to the size attribute. This causes the number of visible options to change. This simulates a "drop-down". Add position:relative to a container, and position:absolute to the select to prevent the element from pushing other elements away.

Demo: http://jsfiddle/HQwXj/