I came across the situation when I wanted to give the user the option of either creating a new entry or selecting from an existing one.
Solution is here...
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.
<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();
}
</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 for IE6 issue.
<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>
</div>
The above implementation wont work in IE 6. It wasn’t able to display the textbox over the dropdown properly.
The following style code is used to overcome the issues with IE6.
<style type="text/css"> .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> |