Free ASP.NET Applications
Home | Form Builder | Survey Builder | Tool Shop | Developer Corner | Services | FAQs  | Contact Form

JavaScript:  ComboBox , DropDownList , Textbox

How to create a ComboBox using JavaScript

This sample demonstrates how you can add dropdown functionality to a textbox using JavaScript.
Added on 5 Aug 2008

General Solutions:

Solution Summary:
Create a ComboBox effect by adding a textbox and a dropdownlist arrow icon to your HTML page and displaying a DIV with a table containing dropdownlist options when the arrow is pressed.
Solution Details:

HTML:

 Add two textboxes with images to the HTML page.

<!-- ComboBox Table (with textbox and arrow icon) -->
<table>
<tr>
<td>
    <table class="combobox" cellpadding="0" cellspacing="0">
    <tr>
    <td>
        <tr>
            <!-- hour -->
            <td>
                <input tabindex="3" maxlength="2" value="00" type="text" id="text2" 
                    style="width:25px; text-align:right;" class="combotext"
                    onkeypress="document.getElementById('option_placeholder').style.display='none';" 
                    onkeydown="document.getElementById('option_placeholder').style.display='none';"  
                    onfocus="buildOptions(23, this.id, 1, 0, 'right');"
                    /></td>
            <td valign="middle"><a href="javascript://" 
                    onmouseout="swapImage('imgText2', '../images/combobox1.gif');" 
                    onmouseover="swapImage('imgText2', '../images/combobox2.gif');" 
                    onclick="buildOptions(23, 'text2', 1, 0, 'right');"><img alt="" border="0" id="imgText2" src="../images/combobox1.gif" /></a></td>
        </tr>
    </table>
</td>
<td>:</td>
<td>
    <table class="combobox" cellpadding="0" cellspacing="0">
        <tr>
            <!-- Minutes -->
            <td>
                <input tabindex="3" maxlength="2" value="00" type="text" id="text1" 
                    style="width:25px; text-align:right;" class="combotext"
                    onkeypress="document.getElementById('option_placeholder').style.display='none';" 
                    onkeydown="document.getElementById('option_placeholder').style.display='none';"  
                    onfocus="buildOptions(60, this.id, 5, 0, 'right');"