<

Multi Column drop-down selection.

Published on
9,478 Points
3,378 Views
1 Endorsement
Last Modified:
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
Comment
Author:Navneet
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
0 Comments

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Join & Write a Comment

The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month