How to automatically expand html select element in javascript

Question

I have a (hidden) html select object in my menu attached to a menu button link, so that clicking the link shows the list so you can pick from it.

When you click the button, it calls some javascript to show the <select>. Clicking away from the <select> hides the list. What I really want is to make the <select> appear fully expanded, as if you had clicked on the "down" arrow, but I can't get this working. I've tried lots of different approaches, but can't make any headway. What I'm doing currently is this:

<li>
    <a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a>
    <select id="list" style="display:none; onblur="javascript:cancellist()">
    </select>
</li>

// in code
function showlist() {
    //using prototype not jQuery
    $('list').show();  // shows the select list
    $('list').focus(); // sets focus so that when you click away it calles onblur()
}

I've tried calling $('list').click().
I've tried setting onfocus="this.click()" But in both cases I'm getting

Uncaught TypeError: Object # has no method 'click'

which is peculiar as link text says that it supports the standard functions.

I've tried setting the .size = .length which works, but doesn't have the same appearance (as when you click to open the element, it floats over the rest of the page.)

Does anyone have any suggestions?

possible duplicate of How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover) — Christian C. Salvadó
– Christian C. Salvadó, Commented May 27, 2010 at 18:32
Similar problems - thanks for pointing them out - they seem more to be looking for options to size the control (width as well as height), whereas all I want to do is to have it appear "opened". — xan
– xan, Commented May 28, 2010 at 8:09
@xan the duplicate pointed out by CMS exactly answers this: you can't. You need custom HTML/JS. — Florian Margaine
– Florian Margaine, Commented Nov 10, 2012 at 8:21

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I've come across the same problem, wanted to implement keyboard navigation in my app, but select elements were not expanded, so people using the keyboard were going to lose functionality. I've created ExpandSelect() function which emulates mouse clicks on select elements, it does so by creating another <select> with multiple options visible at once by setting the size attribute, the code is hosted on Google Code website, ExpandSelect.js is only 4 KB, see screenshots and download it here:

http://code.google.com/p/expandselect/

Screenshots

There is a little difference in GUI when emulating click, but it does not really matter, see it for yourself:

When mouse clicking:

_{(source: googlecode.com)}

When emulating click:

_{(source: googlecode.com)}

More screenshots on project's website, link above.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 9, 2011 at 19:14

Czarek Tomczak

20.8k6 gold badges52 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Brand Over a year ago

Link is now defunct, you can get it here gist.github.com/adamcoulombe/5390270

Anthony · Accepted Answer · 2010-05-27 18:07:37Z

-2

You have a syntax error. It should be:

$('#list').click();

You forgot the #

answered May 27, 2010 at 18:07

Anthony

37.2k26 gold badges103 silver badges167 bronze badges

1 Comment

Christian C. Salvadó Over a year ago

True, but click will not expand the select element.

T.Todua · Accepted Answer · 2014-03-10 08:34:08Z

-2

Here a simple solution, AUTO-EXPANDED select menu (all options visible)

<select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;">
  <option selected="selected" value="0">defaulttt</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
</select>
<script type="text/javascript">
 var slctt=document.getElementById("ddlTestSelect");
 slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width='470px';
</script>

answered Mar 10, 2014 at 8:34

T.Todua

57.1k22 gold badges261 silver badges267 bronze badges

Comments

suresh gopal · Accepted Answer · 2012-10-10 05:49:34Z

-3

Please try this:

function showlist() {
    //using prototype not jQuery
    $('#list').show();  // shows the select list
    $('#list').focus(); // sets focus so that when you click away it calles onblur()
}

answered Oct 10, 2012 at 5:49

suresh gopal

3,1446 gold badges29 silver badges58 bronze badges

3 Comments

Roddy of the Frozen Peas Over a year ago

I stuck your code in a JSFiddle and it does not work. The select box receives the focus, but it does not expand. (Chrome on Win7.)

suresh gopal Over a year ago

@RoddyoftheFrozenPeas just i saw your JSFiddle. please apply select box is display:none; css property. and in script use $('#list') instead of $('list') and in JSFiddle left side choose jquery 1.8.2

Roddy of the Frozen Peas Over a year ago

Your code in your answer says "using prototype not jQuery." Also it still does not work. Updated fiddle. While it does show the select, it does not expand it. (Chrome, Win7.)

Thomas Fonseca · Accepted Answer · 2015-03-20 16:10:40Z

-3

The simplest way is to use the "multiple" attribute in HTML

<select multiple></select>

and you could also add a style attribute to set the height of the list

<select multiple style="height:150px;"></select>

answered Mar 20, 2015 at 16:10

Thomas Fonseca

5424 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to automatically expand html select element in javascript

5 Answers 5

Screenshots

1 Comment

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Screenshots

1 Comment

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related