Drop-down box with multiple columns

I am attempting to create an HTML form similar to one in a current Access form.  In one drop-down, the field displays simply "A", "M", or "D" when it is collapsed.  However, when you click the arrow to see the selections, it shows up as:

A |  Add
M |  Modify
D |  Delete

where the 2nd column is from another column in the same table.
Has anyone created a drop-down like this with HTML or javascript and, if so, how would I have the menu that drops down display a longer string than what is shown in the collapsed entry?
Other forms also have things like names of books in the collapsed drop-down that when expanded, show the author and/or the publisher of the book in separate columns.  I don't really care about getting the different columns appearing exactly under each other (I'll just use the pipe symbol (|)).

See the attached gif file for an example from Access.
Chris Cote
drop-down.gif
chrscoteAsked:
Who is Participating?
 
DropZoneConnect With a Mentor Commented:
Try setting the <select> element with position absolute.  The below code works in IE and Firefox.

    -dZ.
    <select id="expDD" size="4" style="display: none; position:absolute;" 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>

Open in new window

0
 
DropZoneCommented:
Check out the Ext JS library, which contains a large amount of controls, including combo-boxes.

      http://extjs.com/products/extjs/

     -dZ.
0
 
chrscoteAuthor Commented:
Well, I found something on another site that basically uses a div tag around a hidden listbox.  However, when I place it within my table with other fields, the items under the listbox move down when the listbox is displayed.  I've attached code below that shows what I'm talking about.  I apologize if this sounds stupid, but it's been a while since I've done anything like this.

Chris
<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) {
    if (msg=="M") {
        spaces = "&nbsp;&nbsp;"
    } else if (msg=="A"||msg=="D") {
        spaces = "&nbsp;&nbsp;&nbsp;"
    } else {
        spaces = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    }
    document.getElementById('expDDmsg').innerHTML = msg+spaces+"<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>
    <table>
        <tr>
            <td>Add, Modify, or Delete</td>
        </tr>
        <tr>
            <td colspan="2"><div style="border:1px solid #7F9DB9; width:43px;">
        <div id="expDDmsg" style="display:inline" onclick="dispDD()">&nbsp;&nbsp;&nbsp;&nbsp;&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></td>
        </tr>
        <tr>
            <td>Name:</td>
            <td><input type="text" name="name" size="20" /></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input type="text" name="address" size="20" /></td>
        </tr>
    </table>
</body>
</html>

Open in new window

0
 
DropZoneCommented:
And Opera!  That is, tested with IE, Firefox, and Opera.
0
 
chrscoteAuthor Commented:
Thank you very much.  I didn't realize it was so simple.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.