While creating a form for a project I wanted to give the user the option of either creating a new entry or selecting from an existing one. The standard way to do it is to give the user a textbox on one line and a dropdown on another. As with most forms, I wanted to limit the space used so the user wont get overwhelmed by the amount of data he needs to enter. My solution was to join the two objects as you can see in the following screen shot.
The textbox is placed on top of the dropdown with enough room on the right to still display the down arrow of the dropdown. You can see that the user is either able to enter new text into the textbox or select an option from the dropdown.
To display the box properly I use HTML and CSS. When the user selects an option from the dropdown I use Javascript to load the value into the textbox. When the form is submitted ignore the dropdown and just pull the value from the textbox. The trickiest part of this was that IE 6 wasn’t able to display the textbox over the dropdown properly. Thanks to Hedger Wang and his fix I was able to make this work across browsers.
This style code is used to overcome the issues with IE6. Place the following code in between the <head></head> tag of your page.
<style type="text/css">
/*fix dropdown z-index problem. Credit to http://www.hedgerwow.com/360/bugs/css-select-free.html */
.select-free
{
position: absolute;
z-index: 10; /*any value*/
overflow: hidden; /*must have*/
width: 247px; /*must have for any value*/ /*width of area +5*/
}
.select-free iframe
{
display: none; /*sorry for IE5*/
display: /**/ block; /*sorry for IE5*/
position: absolute; /*must have*/
top: 0px; /*must have*/
left: 0px; /*must have*/
z-index: -1; /*must have*/
filter: mask(); /*must have*/
width: 3000px; /*must have for any big value*/
height: 3000px /*must have for any big value*/;
}
.select-free .bd
{
padding: 11px;
}
</style>
This is the Javascript used to display the value in the textbox when the user selects an option from the dropdown. This also goes in between your <head></head> tag.
<script language="javascript" type="text/javascript">
function DropDownTextToBox(objDropdown, strTextboxId) {
document.getElementById(strTextboxId).value = objDropdown.options[objDropdown.selectedIndex].value;
DropDownIndexClear(objDropdown.id);
document.getElementById(strTextboxId).focus();
}
function DropDownIndexClear(strDropdownId) {
if (document.getElementById(strDropdownId) != null) {
document.getElementById(strDropdownId).selectedIndex = -1;
}
}
</script>
This is the HTML that includes the textbox, dropdown and the div that goes around it. You’ll notice IE conditional statements in commented area. This is part of the patch from Hedger Wang’s website. The style was placed on the actual control for simplicity, you can move it to a CSS file if you like.
<div style="position: relative;">
<!--[if lte IE 6.5]><div class="select-free" id="dd3"><div class="bd" ><![endif]-->
<input name="TextboxExample" type="text" maxlength="50" id="TextboxExample" tabindex="2"
onchange="DropDownIndexClear('DropDownExTextboxExample');" style="width: 242px;
position: absolute; top: 0px; left: 0px; z-index: 2;" />
<!--[if lte IE 6.5]><iframe></iframe></div></div><![endif]-->
<select name="DropDownExTextboxExample" id="DropDownExTextboxExample" tabindex="1000"
onchange="DropDownTextToBox(this,'TextboxExample');" style="position: absolute;
top: 0px; left: 0px; z-index: 1; width: 265px;">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
<script language="javascript" type="text/javascript">
//Since the first <option> will be preselected the IndexClear function must fire once to clear that out.
DropDownIndexClear("DropDownExTextboxExample");
</script>
</div>
