<

Multi Column drop-down selection.

Published on
10,037 Points
3,937 Views
1 Endorsement
Last Modified:
Approved
Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a quest I added a client script using jQuery and as the question progressed I added the multi-column to drop-down div selection and things looked well.
Hence I thought of giving it a proper shape so that everyone can use it freely and tweak as per their requirement.
Here is the look at the completed multicolumn selection.

MultiColumnDropDownSelect
So let’s look at the code to understand better, though things are quite straight-forward.
Javascript:
Here we are using jQuery library shipped along with the VS2010 and updated release works fine.


    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#text1").click(function () {
                $("#div1").slideToggle();
            });

            $("#div1 a").click(function () {
                $("#text1").val($(this).text());
                $("#div1").slideToggle();
                $("#text1").focus();
            });
        });
    </script>

Open in new window


1. $("#text1").click(...) : This simply toggles between show and hide of div.
2. $("#div1 a").click(...) : Here whenever we have select the anchor <a> within the <div> the text value of state is set and the div is toggled, we can here also have slideUp instead of slideToggle, and the textbox focus is set.

CSS:

<style type="text/css">
        .dropdown
        {
            width: Auto;
            border: 2px solid #737f8e;
            position: absolute;
            background: #c2c9d1;
        }
        
        .dropdown tr
        {
            margin: 0px;
            padding: 0px;
        }
        .dropdown tr td
        {
            list-style: none;
            border: 1px solid #4b4e55;
        }
        .dropdown tr td a
        {
            text-decoration: none;
            color: #4b4e55;
            padding-left: 5px;
            display: block;
            height: 21px;
            font-weight: bold;
        }
    </style>

Open in new window


The style above is an adaptation (tweaked to match our table structure) from the following article:
http://cssdesigner.wordpress.com/2008/10/23/onclick-textbox-show-div/

HTML:

<body>
    <form id="form1" runat="server">
    <div>
        <input id="text1" readonly type="text" />
        <div id="div1" class="dropdown" style="display: none;">
            <table>
                <tr>
                    <td>
                        <a href="#">Alabama (AL)</a>
                    </td>
                    <td>
                        <a href="#">Alaska (AK)</a>
                    </td>
                    <td>
                        <a href="#">Arizona (AZ)</a>
                    </td>
                    <td>
                        <a href="#">Arkansas (AR)</a>
                    </td>
                    <td>
                        <a href="#">California (CA)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">Colorado (CO)</a>
                    </td>
                    <td>
                        <a href="#">Connecticut (CT)</a>
                    </td>
                    <td>
                        <a href="#">Delaware (DE)</a>
                    </td>
                    <td>
                        <a href="#">Florida (FL)</a>
                    </td>
                    <td>
                        <a href="#">Georgia (GA)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">Hawaii (HI)</a>
                    </td>
                    <td>
                        <a href="#">Idaho (ID)</a>
                    </td>
                    <td>
                        <a href="#">Illinois (IL)</a>
                    </td>
                    <td>
                        <a href="#">Indiana (IN)</a>
                    </td>
                    <td>
                        <a href="#">Iowa (IA)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">Kansas (KS)</a>
                    </td>
                    <td>
                        <a href="#">Kentucky (KY)</a>
                    </td>
                    <td>
                        <a href="#">Louisiana (LA)</a>
                    </td>
                    <td>
                        <a href="#">Maine (ME)</a>
                    </td>
                    <td>
                        <a href="#">Maryland (MD)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">Massachusetts (MA)</a>
                    </td>
                    <td>
                        <a href="#">Michigan (MI)</a>
                    </td>
                    <td>
                        <a href="#">Minnesota (MN)</a>
                    </td>
                    <td>
                        <a href="#">Mississippi (MS)</a>
                    </td>
                    <td>
                        <a href="#">Missouri (MO)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">Montana (MT)</a>
                    </td>
                    <td>
                        <a href="#">Nebraska (NE)</a>
                    </td>
                    <td>
                        <a href="#">Nevada (NV)</a>
                    </td>
                    <td>
                        <a href="#">New Hampshire (NH)</a>
                    </td>
                    <td>
                        <a href="#">New Jersey (NJ)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">New Mexico (NM)</a>
                    </td>
                    <td>
                        <a href="#">New York (NY)</a>
                    </td>
                    <td>
                        <a href="#">North Carolina (NC)</a>
                    </td>
                    <td>
                        <a href="#">North Dakota(ND)</a>
                    </td>
                    <td>
                        <a href="#">Ohio (OH)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">Oklahoma (OK)</a>
                    </td>
                    <td>
                        <a href="#">Oregon (OR)</a>
                    </td>
                    <td>
                        <a href="#">Pennsylvania (PA)</a>
                    </td>
                    <td>
                        <a href="#">Rhode Island (RI)</a>
                    </td>
                    <td>
                        <a href="#">South Carolina (SC)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">South Dakota (SD)</a>
                    </td>
                    <td>
                        <a href="#">Tennessee (TN)</a>
                    </td>
                    <td>
                        <a href="#">Texas (TX)</a>
                    </td>
                    <td>
                        <a href="#">Utah (UT)</a>
                    </td>
                    <td>
                        <a href="#">Vermont (VT)</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">Virginia (VA)</a>
                    </td>
                    <td>
                        <a href="#">Washington (WA)</a>
                    </td>
                    <td>
                        <a href="#">West Virginia (WV)</a>
                    </td>
                    <td>
                        <a href="#">Wisconsin (WI)</a>
                    </td>
                    <td>
                        <a href="#">Wyoming (WY)</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>

Open in new window


We have designed the div to contain the table and <tr> <td> structure to design the multi-columned selection. Everything looks simple and easy.

You are free to improve upon it and use it without any permission or consent.

References:

Though new things were added, but the starting point and inspiration to improvement was
http://cssdesigner.wordpress.com/2008/10/23/onclick-textbox-show-div/

Future Enhancements:

1.Have Checkbox in place of anchor tag for multiple selections of States, and selected state is removed from the table and <td> of that state is left empty.
2.Update textbox to hold multiple values  with each State selected in textbox to have it own cross button, so that each state can be deselected and  placed back into drop-down div.


Thanks!
MultiColumnDropDownSelection.zip
1
Author:Navneet
Ask questions about what you read
If you have a question about something within an article, you can receive help directly from the article author. Experts Exchange article authors are available to answer questions and further the discussion.
Get 7 days free