How to roll down dropdown options on event?

Question

When I use

 $(editarea).focus();

on

<select>
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

I can change the values with up and down arrows, but the dropdown menu isn't exactly dropped yet.
Is there a method that would roll it down? So that the user can see the options without the need to click on the dropdown menu.

Nope, sorry. you can't do that with a ``. What you can do is make it a multiple select, then when one is selected make it a single select, but that of course makes it close. http://jsfiddle.net/bpuPH/ — Kevin B, Nov 18 '13 at 19:45

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

Check out these threads. They cover the same topic.

How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

JavaScript - Force select element to dropdown?

Display DropDown options on Focus

edited May 23 '17 at 12:14

Community

1
1

answered Nov 18 '13 at 19:47

Daved

2,062
1
18
23

score 0 · Answer 2 · answered Nov 18 '13 at 20:44

You cannot open the select element, but you can mimic something similar using the element's size.

jsFiddle DEMO

HTML:

<select id="CarTypes">
    <option value="0">Choose One</option>
    <option value="1">Fiat</option>
    <option value="2">Smart</option>
    <option value="3">Ford</option>
</select>
<input id="mybutt" type="button" value="Try This" />

jQuery/Javascript:

$('#CarTypes').hover(
    function(){
        $(this).attr('size', '3');
    },
    function(){
        $(this).attr('size', '1');
    }
);

$('#CarTypes').focus(function(){
    $(this).attr('size', '3');
});

$('#CarTypes').blur(function(){
    $(this).attr('size', '1');
});

$('#mybutt').click(function() {
    $('#CarTypes').attr('size', '3');
});

//Uncomment below to force open select box on document ready
//$('#CarTypes').focus();

How to roll down dropdown options on event?

2 Answers2