"Opening" a dropdown box from Javascript?

**Luterin** · 05-09-2007, 02:28 PM

To try to explain it as easy as possible, lets say I have a dropdown box (Select) and I have a normal button, and when I press that button I would like the dropdown box to "open" itself and show the different options just as if I had clicked that box itself.

A simplified version of my real problem, but I hope you undestand what I am trying to accomplish and that someone knows if its possible in any way other than making a "new" dropdown box myself. I would prefer to use the built in one for this problem.

**Bob90** · 05-10-2007, 02:54 PM

Have you tried making the box larger, ie you can see more than one box at a time. I'm sure this can be done with DOM or Javascript.
Use the size property.

this is a fudge to your original request, but it would show the options nevertheless.

**Luterin** · 05-11-2007, 09:58 PM

Well, thanks for the suggestion, but what I want a popup-like feature by being able to "open" a dropdown box just like when its clicked on.

I can ofcourse do a DOM Popup thingy myself, but I would prefer if there was some way to get a dropdown box to actually open itself instead.

**Bob90** · 05-12-2007, 08:59 AM

Code:

<select id="sel" onClick="Javascript:this.size=1">
<option value="1">Hello1</option>
<option value="1">Hello2</option>
<option value="1">Hello3</option>
<option value="1">Hello4</option>
<option value="1">Hello5</option>
<option value="1">Hello6</option>
<option value="1">Hello7</option>
<option value="1">Hello8</option>
</select>

<script>


el = document.getElementById("sel");
el.size = el.options.length;


</script>

**Luterin** · 05-12-2007, 10:21 AM

Thanks for the suggestion, but this changes the dropdown box into a selectbox, so anything below the box will be pushed down, and I would like the box items appear on top of whats below the dropdown box, just as a dropdown box works when you click it.

Again thanks for the idea anyway.

**jscheuer1** · 05-12-2007, 04:32 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#sel {
position:absolute;
}
</style>
<script type="text/javascript">
function openSel(el){
var el = document.getElementById(el)
var el1 = el.cloneNode(true);
el1.size = el.options.length;
el.parentNode.replaceChild(el1, el);
}
</script>

</head>
<body>
<input type="button" value="open" onclick="openSel('sel');"><br>
<div style="position:relative;float:left;width:4em;height:1.2em;"><select id="sel" onclick="this.size=1">
<option value="1">Hello1</option>
<option value="1">Hello2</option>
<option value="1">Hello3</option>
<option value="1">Hello4</option>
<option value="1">Hello5</option>
<option value="1">Hello6</option>
<option value="1">Hello7</option>
<option value="1">Hello8</option>
</select></div>
<div style="clear:left;">other content</div>

</body>
</html>

Notes: Cloning and replacing the node was only required in Opera to overcome an apparent bug in assigning a size to a select that had no size attribute or one of 1 or less. Otherwise, it could have been:

Code:

function openSel(el){
var el = document.getElementById(el)
el.size = el.options.length;
}

Thread: "Opening" a dropdown box from Javascript?

Thread Tools

Search Thread

"Opening" a dropdown box from Javascript?

Bookmarks

Bookmarks

Posting Permissions