JavaScript - Force select element to dropdown?

Question

How can I force the select element to dropdown using Javascript? Is it possible?

<select id="MiamiPlayers">
    <option value="0">Bosh</option>
    <option value="1">Wade</option>
    <option value="2">LeBron</option>
</select>

<input type="button" onclick="Show()" />

<script type="text/javascript">
    function Show()
    {
        //force the select to dropdown...
    }
</script>

Thanks in advance!

Possible duplicate of [How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?](http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due) — Vadzim, Dec 08 '16 at 12:50

score 5 · Answer 1 · answered Jun 02 '11 at 05:37

5

You can't open the drop down, but you can do something like this:

document.getElementById('MiamiPlayers').setAttribute('size', 3);

See http://jsfiddle.net/MdCBB/

answered Jun 02 '11 at 05:37

Petah

45,477
28
157
213

Yes, it's to bad you can't open the drop down though. – Web_Designer Jun 21 '11 at 20:22

score 2 · Answer 2 · edited May 23 '17 at 12:00

2

See Display DropDown options on Focus

edited May 23 '17 at 12:00

Community

1
1

answered Jun 02 '11 at 05:33

ari

295
1
4
15

score 0 · Accepted Answer · answered Jun 02 '11 at 05:34

0

var select = document.getElementById(id);
select.size = select.options.length;

where id is the id of the your select box...

answered Jun 02 '11 at 05:34

Dinash

3,027
4
32
45

1

That's converting a dropdown to a list. Useless in most cases. – Jorge Fuentes González Jan 23 '17 at 16:56
@JorgeFuentesGonzález Could you provide a better solution for OP's task? – BairDev Mar 16 '17 at 10:02
@malte Actually Petah answer is the correct one, as it states "You can't open the drop down, but...". Needless to add the same answer again. If you need to open it so badly, then you need to create your own select widget or use one of many existent around the Internet. – Jorge Fuentes González Mar 16 '17 at 10:08
@JorgeFuentesGonzález fair enough. There are seemingly [different](http://stackoverflow.com/a/3919313/2092322) [opinions](http://stackoverflow.com/a/21044802/2092322) [regarding](http://stackoverflow.com/a/22151582/2092322) that [matter](http://stackoverflow.com/a/36581696/2092322). – BairDev Mar 16 '17 at 11:03
@malte Those are completely different answers talking about attributes... are you kidding me? xD The question is "Can I open a dropdown?" and "Convert the dropdown to a list" is obviously not a correct answer. That's a workaround to an unsolvable problem, but not an answer. There are important differences between a list and a dropdown... Mostly the vertical height. – Jorge Fuentes González Mar 16 '17 at 14:18
I'm reading it again but, with your attribute thingy I completely lost the point about what are we talking about xD Actually, the best answers are inside here: http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due Btw, the Chrome one is not working right now, so for the long term, always use your own widget for this. – Jorge Fuentes González Mar 16 '17 at 14:21
@JorgeFuentesGonzález yeah, the Chrome solution seems to be obscure anyway. I thought, that we've talked about `select.size =` vs. `select.setAttribute('size' ...)`. Probably because I don't quite understand what you're pointing at with *converting to a list* and *useless*. – BairDev Mar 17 '17 at 13:09
@malte Oh, no no. I'm just telling that setting the size parameter of a dropdown will not trigger the dopdown event, but converting the dropdown to a list. Actually, converting a select into a list is useless in most cases, as it changes element height, for example. A list is a completely different element than a dropdown. Check this fiddle to see what I'm talking about: http://jsfiddle.net/MdCBB/60/ – Jorge Fuentes González Mar 17 '17 at 13:40
@JorgeFuentesGonzález You are right. I mean, the term *list* is AFAIK not clearl defined in that context and the element remains a ` – BairDev Mar 17 '17 at 14:07
@malte Yep, the element remains a select but the behavior changes. I should have said that instead xDD Don't really know any resource regarding this difference btw. – Jorge Fuentes González Mar 17 '17 at 14:18

JavaScript - Force select element to dropdown?

3 Answers3