We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

Drop-down box with multiple columns

Medium Priority
844 Views
Last Modified: 2013-11-19
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
Comment
Watch Question

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

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

     -dZ.

Author

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

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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Commented:
And Opera!  That is, tested with IE, Firefox, and Opera.

Author

Commented:
Thank you very much.  I didn't realize it was so simple.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.