?
Solved

Drop-down box with multiple columns

Posted on 2009-02-11
5
Medium Priority
?
808 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
0
Comment
Question by:chrscote
  • 3
  • 2
5 Comments
 
LVL 18

Expert Comment

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

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

     -dZ.
0
 

Author Comment

by:chrscote
ID: 23621683
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
 
LVL 18

Accepted Solution

by:
DropZone earned 1000 total points
ID: 23622200
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
 
LVL 18

Expert Comment

by:DropZone
ID: 23622214
And Opera!  That is, tested with IE, Firefox, and Opera.
0
 

Author Closing Comment

by:chrscote
ID: 31545546
Thank you very much.  I didn't realize it was so simple.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question