asked on

JScript: Open select box without clicking on it

This question is really only about JScript (i.e. JavaScript for IE). You're all familiar with <select> boxes. When you click on them, they open up, revealing all the different options that you scroll through and select. What I'm wondering: is there any way to open up a <select> box without actually clicking on it, purely with JScript? Again, I only need this functionality for Internet Explorer. I've also included a picture if you don't understand what I mean; basically, can you change the image on the left to the image on right purely with JScript? I'm just not sure if this is possible, so I thought I'd ask. Thanks.
http://img72.imageshack.us/img72/502/selectti1.gif

Yury Merezhkov

The only thing I can think of right now:

<select id="testSelect">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
</select>

<a onclick="document.getElementById('testSelect').size = 4">Open</a>
<a onclick="document.getElementById('testSelect').size = 1"> | Close</a>

Saqib Khan

Add Multiple Attribute
<select id="testSelect" "Multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

Saqib Khan

> <SELECT NAME=sections MULTIPLE>

Yury Merezhkov

Yes, multiple is a good option. You can change it with JS like this:

<select id="testSelect" style="z-index:10">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
</select>

<a onclick="document.getElementById('testSelect').multiple = true">Open</a>
<a onclick="document.getElementById('testSelect').multiple = false"> | Close</a>

soapergem

ASKER

That's not really what I had in mind....the multiple attribute is very different from just being "open," simply because it stretches the page and affects items around it (especially when you change it dynamically). The reason I was asking is because I have an onClick handler attached to one of my <select> elements, and I noticed that in Internet Explorer, when I click on this select element, it will open the select options, execute the onClick handler script, and then immediately close it again. So I was hoping to just add some code to re-open the select box at the end of the handler to avoid this issue.

Saqib Khan

why is onclick event on Select box, what exactaly it does upon onclick?

Yury Merezhkov

Please post the function you have in onclick event of the select.

ic3b3rg

They cannot be opened with JS, but if the select has focus and the user presses Alt + Down Arrow, it will open - native behavior in IE & FF

soapergem

ASKER

This is a dumbed-down version of the code I'm using, but it illustrates the point. Notice the behavior difference in IE vs Firefox. When you click on the <select> list in Firefox, the script is executed and the list remains open. In Internet Explorer, however, the list is immediately closed again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function greyBox(oElement, oList, bState)
{
oElement.checked = bState;
if ( bState )
{
oList.className = oList.className.replace(/ ?grey$/, '');
}
else
{
oList.className += ( oList.className.length ) ? ' grey' : 'grey';
}
return;
}
</script>
<style type="text/css">
select.grey
{
color: #999;
}
</style>
</head>
<body>
<form>
<p>
<input type="checkbox" name="check" id="check" onclick="greyBox(this,this.form.elements['list'],this.checked);" />
Click to enable
</p>
<p>
<select name="list" id="list" class="grey" onclick="greyBox(this.form.elements['check'],this,true);">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</p>
</form>
</body>
</html>

soapergem

ASKER

Thanks for pointing out the ALT + Down Arrow command, ic3b3rg; I wasn't previously aware of that one. So I've since modified my code to accommodate for that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function greyBox(oElement, oList, bState)
{
oElement.checked = bState;
if ( bState )
{
oList.className = oList.className.replace(/ ?grey$/, '');
}
else
{
oList.className += ( oList.className.length ) ? ' grey' : 'grey';
}
return;
}
function keyGreyBox(evt, oElement, oList, bState)
{
evt = ( evt || window.event );
evt.key = ( evt.keyCode || evt.charCode || evt.which || 0 );
if ( evt.key == 31 || evt.key == 40 || evt.key == 63233 )
{
if ( evt.altKey == true )
{
greyBox(oElement, oList, bState);
}
}
return;
}
</script>
<style type="text/css">
select.grey
{
color: #999;
}
</style>
</head>
<body>
<form>
<p>
<input type="checkbox" name="check" id="check" onclick="greyBox(this,this.form.elements['list'],this.checked);" />
Click to enable </p>
<p>
<select name="list" id="list" class="grey" onclick="greyBox(this.form.elements['check'],this,true);" onchange="greyBox(this.form.elements['check'],this,true);" onkeydown="keyGreyBox(event,this.form.elements['check'],this,true);">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</p>
</form>
</body>
</html>

Yury Merezhkov

Ok, I'm using IE 6.0 SP1 and FF 1.5.0.6. When I click on select on your page it stays open in FF and IE until I choose some option.

ASKER CERTIFIED SOLUTION

ic3b3rg

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

soapergem

ASKER

Perfect! Thanks!

ic3b3rg

Glad I could help. Thanks for the points!