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 [Open Select using Javascript/jQuery?](http://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery) — Nick Craver, May 27 '10 at 18:06
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-t) — Christian C. Salvadó, May 27 '10 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, May 28 '10 at 08:09
@xan the duplicate pointed out by CMS exactly answers this: you can't. You need custom HTML/JS. — Florian Margaine, Nov 10 '12 at 08:21

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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.

Link is now defunct, you can get it here https://gist.github.com/adamcoulombe/5390270 — Peter Brand, Jan 26 '23 at 01:40

score -1 · Answer 2 · answered Mar 10 '14 at 08:34

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>

score -2 · Answer 3 · answered Oct 10 '12 at 05:49

-2

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 '12 at 05:49

suresh gopal

3,138
6
27
58

I stuck your code in a [JSFiddle](http://jsfiddle.net/URXyQ/) and it does not work. The select box receives the focus, but it does not expand. (Chrome on Win7.) – Roddy of the Frozen Peas Oct 10 '12 at 05:57
@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 – suresh gopal Oct 10 '12 at 06:04
2

Your code in your answer says "using prototype not jQuery." Also it still does not work. [Updated fiddle](http://jsfiddle.net/URXyQ/3/). While it does show the select, it does not expand it. (Chrome, Win7.) – Roddy of the Frozen Peas Oct 10 '12 at 13:56

score -2 · Answer 4 · answered May 27 '10 at 18:07

-2

You have a syntax error. It should be:

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

You forgot the #

answered May 27 '10 at 18:07

Anthony

36,459
25
97
163

1

True, but `click` will not expand the `select` element. – Christian C. Salvadó May 27 '10 at 18:32

score -3 · Answer 5 · answered Mar 20 '15 at 16:10

-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 '15 at 16:10

Thomas Fonseca

542
4
12

How to automatically expand html select element in javascript

5 Answers5

Screenshots

Linked

Related