Browse All Articles > Multi Column drop-down selection.
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.
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:
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:
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
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.
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>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>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>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
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)