Is it possible to use JS to open an HTML select to show its option list?

Javascript Problem Overview

Is it possible to use JavaScript to open an HTML select to show its option list?

Javascript Solutions

Solution 1 - Javascript

Unfortunately there's a simple answer to this question, and it's "No"

Solution 2 - Javascript

I had this problem...and found a workable solution.

I didn't want the select box to show until the user clicked on some plain HTML. So I overlayed the select element with opacity=.01. Upon clicking, I changed it back to opacity=100. This allowed me to hide the select, and when the user clicked the text the select appeared with the options showing.

Solution 3 - Javascript

This works on Google Chrome

dropDown = function (elementId) {
    var dropdown = document.getElementById(elementId);
    try {
        showDropdown(dropdown);
    } catch(e) {
        
    }
    return false;
};

showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

Solution 4 - Javascript

I use this... but it requires the user to click on the select box...

Here are the 2 javascript functions

function expand(obj)
{
	obj.size = 5;
}
function unexpand(obj)
{
	obj.size = 1;
}

then i create the select box

<select id="test" multiple="multiple" name="foo" onFocus="expand(this)" onBlur="unexpand(this)">
<option >option1</option>
<option >option2</option>
<option >option3</option>
<option >option4</option>
<option >option5</option>
</select>

I know this code is a little late, but i hope it helps someone who had the same problem as me.

ps/fyi i have not tested the code above (i create my select box dynamically), and the code i did write was only tested in FireFox.

Solution 5 - Javascript

After trying to solve this issue for some time, I managed to come with a working solution that is also valid:

var event = new MouseEvent('mousedown');
element.dispatchEvent(event);

I've tried to implement this in Jquery as well, using trigger and mousedown or only mousedown but with no success.

Solution 6 - Javascript

This is very late, but I thought it could be useful to someone should they reference this question. I beleive the below JS will do what is asked.

<script>     
         $(document).ready(function()
           {
          document.getElementById('select').size=3;
           });
    </script>

Solution 7 - Javascript

I'm fairly certain the answer is: No. You can select options with JavaScript but not open the select. You'd have to use a custom solution.

Solution 8 - Javascript

The solution I present is safe, simple and compatible with Internet Explorer, FireFox and Chrome.

This approach is new and complete. I not found nothing equal to that solution on the internet. Is simple, cross-browser (Internet Explorer, Chrome and Firefox), preserves the layout, use the select itself and is easy to use.

Note: JQuery is required.

HTML CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CustonSelect</title>
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./CustomSelect.js"></script>
</head>
<div id="testDiv"></div>
<body>
	<table>
		<tr>
			<td>
				<select id="Select0" >
					<option value="0000">0000</option>
					<option value="0001">0001</option>
					<option value="0002">0002</option>
					<option value="0003">0003</option>
					<option value="0004">0004</option>
					<option value="0005">0005</option>
					<option value="0006">0006</option>
					<option value="0007">0007</option>
					<option value="0008">0008</option>
					<option value="0009">0009</option>
					<option value="0010">0010</option>
					<option value="0011">0011</option>
					<option value="0012">0012</option>
					<option value="0013">0013</option>
					<option value="0014">0014</option>
					<option value="0015">0015</option>
					<option value="0016">0016</option>
					<option value="0017">0017</option>
					<option value="0018">0018</option>
					<option value="0019">0019</option>
					<option value="0020">0020</option>
					<option value="0021">0021</option>
					<option value="0022">0022</option>
					<option value="0023">0023</option>
					<option value="0024">0024</option>
					<option value="0025">0025</option>
					<option value="0026">0026</option>
					<option value="0027">0027</option>
					<option value="0028">0028</option>
					<option value="0029">0029</option>
					<option value="0030">0030</option>
					<option value="0031">0031</option>
					<option value="0032">0032</option>
					<option value="0033">0033</option>
					<option value="0034">0034</option>
					<option value="0035">0035</option>
					<option value="0036">0036</option>
					<option value="0037">0037</option>
					<option value="0038">0038</option>
					<option value="0039">0039</option>
					<option value="0040">0040</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<select id="Select1" >
					<option value="0000">0000</option>
					<option value="0001">0001</option>
					<option value="0002">0002</option>
					<option value="0003">0003</option>
					<option value="0004">0004</option>
					<option value="0005">0005</option>
					<option value="0006">0006</option>
					<option value="0007">0007</option>
					<option value="0008">0008</option>
					<option value="0009">0009</option>
					<option value="0010">0010</option>
					<option value="0011">0011</option>
					<option value="0012">0012</option>
					<option value="0013">0013</option>
					<option value="0014">0014</option>
					<option value="0015">0015</option>
					<option value="0016">0016</option>
					<option value="0017">0017</option>
					<option value="0018">0018</option>
					<option value="0019">0019</option>
					<option value="0020">0020</option>
					<option value="0021">0021</option>
					<option value="0022">0022</option>
					<option value="0023">0023</option>
					<option value="0024">0024</option>
					<option value="0025">0025</option>
					<option value="0026">0026</option>
					<option value="0027">0027</option>
					<option value="0028">0028</option>
					<option value="0029">0029</option>
					<option value="0030">0030</option>
					<option value="0031">0031</option>
					<option value="0032">0032</option>
					<option value="0033">0033</option>
					<option value="0034">0034</option>
					<option value="0035">0035</option>
					<option value="0036">0036</option>
					<option value="0037">0037</option>
					<option value="0038">0038</option>
					<option value="0039">0039</option>
					<option value="0040">0040</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<select id="Select2" >
					<option value="0000">0000</option>
					<option value="0001">0001</option>
					<option value="0002">0002</option>
					<option value="0003">0003</option>
					<option value="0004">0004</option>
					<option value="0005">0005</option>
					<option value="0006">0006</option>
					<option value="0007">0007</option>
					<option value="0008">0008</option>
					<option value="0009">0009</option>
					<option value="0010">0010</option>
					<option value="0011">0011</option>
					<option value="0012">0012</option>
					<option value="0013">0013</option>
					<option value="0014">0014</option>
					<option value="0015">0015</option>
					<option value="0016">0016</option>
					<option value="0017">0017</option>
					<option value="0018">0018</option>
					<option value="0019">0019</option>
					<option value="0020">0020</option>
					<option value="0021">0021</option>
					<option value="0022">0022</option>
					<option value="0023">0023</option>
					<option value="0024">0024</option>
					<option value="0025">0025</option>
					<option value="0026">0026</option>
					<option value="0027">0027</option>
					<option value="0028">0028</option>
					<option value="0029">0029</option>
					<option value="0030">0030</option>
					<option value="0031">0031</option>
					<option value="0032">0032</option>
					<option value="0033">0033</option>
					<option value="0034">0034</option>
					<option value="0035">0035</option>
					<option value="0036">0036</option>
					<option value="0037">0037</option>
					<option value="0038">0038</option>
					<option value="0039">0039</option>
					<option value="0040">0040</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<select id="Select3" >
					<option value="0000">0000</option>
					<option value="0001">0001</option>
					<option value="0002">0002</option>
					<option value="0003">0003</option>
					<option value="0004">0004</option>
					<option value="0005">0005</option>
					<option value="0006">0006</option>
					<option value="0007">0007</option>
					<option value="0008">0008</option>
					<option value="0009">0009</option>
					<option value="0010">0010</option>
					<option value="0011">0011</option>
					<option value="0012">0012</option>
					<option value="0013">0013</option>
					<option value="0014">0014</option>
					<option value="0015">0015</option>
					<option value="0016">0016</option>
					<option value="0017">0017</option>
					<option value="0018">0018</option>
					<option value="0019">0019</option>
					<option value="0020">0020</option>
					<option value="0021">0021</option>
					<option value="0022">0022</option>
					<option value="0023">0023</option>
					<option value="0024">0024</option>
					<option value="0025">0025</option>
					<option value="0026">0026</option>
					<option value="0027">0027</option>
					<option value="0028">0028</option>
					<option value="0029">0029</option>
					<option value="0030">0030</option>
					<option value="0031">0031</option>
					<option value="0032">0032</option>
					<option value="0033">0033</option>
					<option value="0034">0034</option>
					<option value="0035">0035</option>
					<option value="0036">0036</option>
					<option value="0037">0037</option>
					<option value="0038">0038</option>
					<option value="0039">0039</option>
					<option value="0040">0040</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<select id="Select4" >
					<option value="0000">0000</option>
					<option value="0001">0001</option>
					<option value="0002">0002</option>
					<option value="0003">0003</option>
					<option value="0004">0004</option>
					<option value="0005">0005</option>
					<option value="0006">0006</option>
					<option value="0007">0007</option>
					<option value="0008">0008</option>
					<option value="0009">0009</option>
					<option value="0010">0010</option>
					<option value="0011">0011</option>
					<option value="0012">0012</option>
					<option value="0013">0013</option>
					<option value="0014">0014</option>
					<option value="0015">0015</option>
					<option value="0016">0016</option>
					<option value="0017">0017</option>
					<option value="0018">0018</option>
					<option value="0019">0019</option>
					<option value="0020">0020</option>
					<option value="0021">0021</option>
					<option value="0022">0022</option>
					<option value="0023">0023</option>
					<option value="0024">0024</option>
					<option value="0025">0025</option>
					<option value="0026">0026</option>
					<option value="0027">0027</option>
					<option value="0028">0028</option>
					<option value="0029">0029</option>
					<option value="0030">0030</option>
					<option value="0031">0031</option>
					<option value="0032">0032</option>
					<option value="0033">0033</option>
					<option value="0034">0034</option>
					<option value="0035">0035</option>
					<option value="0036">0036</option>
					<option value="0037">0037</option>
					<option value="0038">0038</option>
					<option value="0039">0039</option>
					<option value="0040">0040</option>
				</select>
			</td>
		</tr>
	</table>
	<input type="button" id="Button0" value="MoveLayout!"/>
</body>
</html>

JAVASCRIPT CODE

var customSelectFields = new Array();


// Note: The list of selects to be modified! By Questor
customSelectFields[0] = "Select0";
customSelectFields[1] = "Select1";
customSelectFields[2] = "Select2";
customSelectFields[3] = "Select3";
customSelectFields[4] = "Select4";

$(document).ready(function()
{
	
	
	//Note: To debug! By Questor
	$("#Button0").click(function(event){ AddTestDiv(); });
	
	StartUpCustomSelect(null);	
	
});


//Note: To test! By Questor
function AddTestDiv()
{
	$("#testDiv").append("<div style=\"width:100px;height:100px;\"></div>");
}


//Note: Startup selects customization scheme! By Questor
function StartUpCustomSelect(what)
{
	
	for (i = 0; i < customSelectFields.length; i++)
	{
		
		$("#" + customSelectFields[i] + "").click(function(event){ UpCustomSelect(this); });
		$("#" + customSelectFields[i] + "").wrap("<div id=\"selectDiv_" + customSelectFields[i] + "\" onmouseover=\"BlockCustomSelectAgain();\" status=\"CLOSED\"></div>").parent().after("<div id=\"coverSelectDiv_" + customSelectFields[i] + "\" onclick=\"UpOrDownCustomSelect(this);\" onmouseover=\"BlockCustomSelectAgain();\"></div>");
		
		
		//Note: Avoid breaking the layout when the CSS is modified from "position" to "absolute" on the select! By Questor
		$("#" + customSelectFields[i] + "").parent().css({'width': $("#" + customSelectFields[i] + "")[0].offsetWidth + 'px', 'height': $("#" + customSelectFields[i] + "")[0].offsetHeight + 'px'});
		
		BlockCustomSelect($("#" + customSelectFields[i] + ""));
		
	}
}


//Note: Repositions the div that covers the select using the "onmouseover" event so 
//Note: if element on the screen move the div always stand over it (recalculate! By Questor
function BlockCustomSelectAgain(what)
{
	for (i = 0; i < customSelectFields.length; i++)
	{
		if($("#" + customSelectFields[i] + "").parent().attr("status") == "CLOSED")
		{
			BlockCustomSelect($("#" + customSelectFields[i] + ""));
		}
	}
}


//Note: Does not allow the select to be clicked or clickable! By Questor
function BlockCustomSelect(what)
{
	
	var coverSelectDiv = $(what).parent().next();
	
	
	//Note: Ensures the integrity of the div style! By Questor
	$(coverSelectDiv).removeAttr('style');
	
	
	//Note: To resolve compatibility issues! By Questor
	var backgroundValue = "";
	var filerValue = "";
	if(navigator.appName == "Microsoft Internet Explorer")
	{
		backgroundValue = 'url(fakeimage)';
		filerValue = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=\'scale\', src=\'fakeimage\' )';
	}
	
	
	//Note: To debug! By Questor
	//'border': '5px #000 solid',
	
	$(coverSelectDiv).css({
		'position': 'absolute', 
		'top': $(what).offset().top + 'px', 
		'left': $(what).offset().left + 'px', 
		'width': $(what)[0].offsetWidth + 'px', 
		'height': $(what)[0].offsetHeight + 'px', 
		'background': backgroundValue,
		'-moz-background-size':'cover',
		'-webkit-background-size':'cover',
		'background-size':'cover',
		'filer': filerValue
	});
	
}


//Note: Allow the select to be clicked or clickable! By Questor
function ReleaseCustomSelect(what)
{
	
	var coverSelectDiv = $(what).parent().next();
	
	$(coverSelectDiv).removeAttr('style');
	$(coverSelectDiv).css({'display': 'none'});
	
}


//Note: Open the select! By Questor
function DownCustomSelect(what)
{
	
	
	//Note: Avoid breaking the layout. Avoid that select events be overwritten by the others! By Questor
	$(what).css({
		'position': 'absolute', 
		'z-index': '100'
	});
	
	
	//Note: Open dropdown! By Questor
	$(what).attr("size","10");
	
	ReleaseCustomSelect(what);
	
	
	//Note: Avoids the side-effect of the select loses focus.! By Questor
	$(what).focus();
	
	
	//Note: Allows you to select elements using the enter key when the select is on focus! By Questor
	$(what).keyup(function(e){
		if(e.keyCode == 13)
		{
			UpCustomSelect(what);
		}
	});
	
	
	//Note: Closes the select when loses focus! By Questor
	$(what).blur(function(e){
		UpCustomSelect(what);
	});
	
	$(what).parent().attr("status", "OPENED");
	
}


//Note: Close the select! By Questor
function UpCustomSelect(what)
{
	
	$(what).css("position","static");
	
	
	//Note: Close dropdown! By Questor
	$(what).attr("size","1");
	
	BlockCustomSelect(what);
	
	$(what).parent().attr("status", "CLOSED");
	
}


//Note: Closes or opens the select depending on the current status! By Questor
function UpOrDownCustomSelect(what)
{
	
	var customizedSelect = $($(what).prev().children()[0]);
	
	if($(what).prev().attr("status") == "CLOSED")
	{
		DownCustomSelect(customizedSelect);
	}
	else if($(what).prev().attr("status") == "OPENED")
	{
		UpCustomSelect(customizedSelect);
	}
	
}

Solution 9 - Javascript

<select id="myDropDown">
  <option>html5</option>
  <option>javascript</option>
  <option>jquery</option>
  <option>css</option>
  <option>sencha</option>
</select>

By jQuery:

var myDropDown=$("#myDropDown");
var length = $('#myDropDown> option').length;
//open dropdown
myDropDown.attr('size',length);
//close dropdown
myDropDown.attr('size',0);

By javascript:

var myDropDown=document.getElementById("myDropDown");
var length = myDropDown.options.length;
//open dropdown
myDropDown.size = length;
//close dropdown
myDropDown.size = 0;

Copied from: Open close select

Solution 10 - Javascript

//use jquery
$select.trigger('mousedown')

Content Type	Original Author	Original Content on Stackoverflow
Question	Darryl Hein	View Question on Stackoverflow
Solution 1 - Javascript	Gareth	View Answer on Stackoverflow
Solution 2 - Javascript	Phil	View Answer on Stackoverflow
Solution 3 - Javascript	Valentin Borisov	View Answer on Stackoverflow
Solution 4 - Javascript	Jason de Belle	View Answer on Stackoverflow
Solution 5 - Javascript	Asaf David	View Answer on Stackoverflow
Solution 6 - Javascript	Rhys	View Answer on Stackoverflow
Solution 7 - Javascript	Eric Wendelin	View Answer on Stackoverflow
Solution 8 - Javascript	Eduardo Lucio	View Answer on Stackoverflow
Solution 9 - Javascript	Syed Nasir Abbas	View Answer on Stackoverflow
Solution 10 - Javascript	anubiskong	View Answer on Stackoverflow