Display 2 columns in drop-down when expanded

@chrscoteFeb 10.2009

I am trying to create a drop-down like the ones you can show in Access in which one column is displayed when it is collapsed, but when you click the down arrow, you can display more than one column of data. For example, in one drop-down, it displays either “A”, “M”, or “D” when it is collapsed. However, when you drop the combo box down, it shows
“A | Add”
“M | Modify”
“D | Delete”
for the choices.

Is it possible to do this either through Javascript or simply with the <select> element?

Chris

to post a comment

JavaScript

@JMRKERFeb 10.2009 — #Might not be exactly what you want...

[CODE]<html>
 <head>
 <title>Exanding Drop-Down List</title>
 <script type="text/javascript">
 // From: http://www.webdeveloper.com/forum/showthread.php?t=201809
 function expDD(msg) {
 document.getElementById('expDDmsg').innerHTML = msg;
 document.getElementById('expDD').style.display='none';
 }
 </script>
 </head>
 <body>
 <div style="border:1px solid red; width:90px;">
 <div id="expDDmsg" style="display:inline"
 onclick="document.getElementById('expDD').style.display='inline'">
 Select
 </div>
 <select id="expDD" style="display:none" onChange="expDD(this.value)" size="4">
 <option value="Select"></option>
 <option value="A">A | Add</option>
 <option value="M">M | Modify</option>
 <option value="D">D | Delete</option>
 </select>
 </div>
 </body>
 </html>
 [/CODE]

but should be close if I understand the problem.

@chrscoteauthorFeb 11.2009 — #That is very close, but is there a way to do something similar with a normal select box, or would I have to create graphics to make it look like a regular select box?

Chris

@chrscoteauthorFeb 11.2009 — #OK, I've been playing around with this code for quite a bit and have the following code:

[CODE]<html>
 <head>
 <title>Exanding Drop-Down List</title>
 <script type="text/javascript">
 // From: http://www.webdeveloper.com/forum/showthread.php?t=201809
 function expDD(msg) {
 document.getElementById('expDDmsg').innerHTML = msg+"<img src='down.gif' onmouseup="this.src='down.gif'" onmousedown="this.src='downPress.gif'" height="16" width="15" />";
 document.getElementById('expDD').style.display='none';
 }
 function dispDD() {
 disp = document.getElementById('expDD').style.display;
 if (disp=="none") {
 document.getElementById('expDD').style.display='inline';
 } else {
 document.getElementById('expDD').style.display='none';
 }
 }
 </script>
 </head>
 <body>
 <div style="border:1px solid #7F9DB9; width:43px;">
 <div id="expDDmsg" style="display:inline" onclick="dispDD()">&nbsp;&nbsp;<img src="down.gif" onmouseup="this.src='down.gif'" onmousedown="this.src='downPress.gif'" height="16" width="15" />
 </div>
 </div>
 <select id="expDD" size="4" style="display: none" onchange="expDD(this.value)">
 <option value=""></option>
 <option value="A">A | Add</option>
 <option value="M">M | Modify</option>
 <option value="D">D | Delete</option>
 </select>
 </body>
 </html>[/CODE]

Now, in my form, of course, this isn't the only item in it. I have other elements and more than one row in a table of items. I would like to make it so that the expDD select box displays over the other items in the form (in terms of z-axis). Otherwise, when I display this select box, all the other elements move down to make room for it. I know I've seen this type of thing done with menus like the "Quick Links" menu on this page, but I haven't figured out how to do this so that it appears directly below the text div though on another z-level.

Does anyone out there know how to do this?

Chris

Display 2 columns in drop-down when expanded

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Display 2 columns in drop-down when expanded

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴