Home
 Index > JavaScript > How to create a ComboBox using JavaScript

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:25pxtext-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:25pxtext-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');"
                    /></td>
            <td valign="middle"><a href="javascript://" 
                    
onmouseout="swapImage('imgText1', '../images/combobox1.gif');" 
                    
onmouseover="swapImage('imgText1', '../images/combobox2.gif');" 
                    
onclick="buildOptions(60, 'text1', 5, 0, 'right');"><img alt="" border="0" id="imgText1" src="../images/combobox1.gif" /></a></td>
        </tr>
    </table>
</
td>
</
tr>
</
table>
<!-- DIV acts as a placeholder, this is where we will place out combobox options 
     If you choose not to create options dynamically, you can simply add a static options table to this div -->
<div id="option_placeholder" tabindex="-1" style="border:solid 1px black;display:none;background-color:White;width:43px;"></div>

JavaScript:

<script language="javascript" type="text/javascript">
var
 curId = '';

// This example simple populates a list of integers between the range specified
// params: max (top limit), id (id of target textbox), increment (increments the option value), begin (first option value), align (horizontal)
// in this example we will increment by five; so the values in a "minutes" textbox for a timepicker will be: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55

function buildOptions(max, id, increment, begin, align) {
   
    
var box = document.getElementById(id);
        
var option_placeholder = document.getElementById('option_placeholder');
        
if (option_placeholder.style.display=='none' || curId != id) {
            option_placeholder.style.display = 
'none';
            openCombo(id, 
'option_placeholder');
            curId = id;
                
var makeIt = '<table id=\"myTable\" tabindex=\"-1\"  width=\"100%\" cellpadding=1 cellspacing=0>';
                
var i = begin;
                
while (i <= max) {
                    
var val = '';
                    
if (i < 10) {
                        val = 
'0';
                    }    
                    val += i;       
                    makeIt += 
"<tr><td style=\"text-align:" + align + "\" onclick=\"document.getElementById(\'" + id + "\').value=(\'" + val + "\');document.getElementById(\'option_placeholder\').style.display=\'none\';\" onmouseout=\"this.style.backgroundColor=\'#FFFFFF\';this.style.color=\'#000000\'\" onmouseover=\"this.style.backgroundColor=\'#316AC5\';this.style.color=\'white\';\" class=\"comboOption\">";
                    makeIt += val + 
'</td></tr>';
                    i=i+increment
                }
                makeIt += 
'</table>';
                option_placeholder.innerHTML = makeIt;
        } 
else {
            option_placeholder.style.display=
'none';
        }
}

// hover effect on the dropdownlist arrow icon
function swapImage(img, src) {
    
var img = document.getElementById(img);
    img.src = src;
}

// check the click events are not occurring on the controls
// if the mouse click event occurs outside the control, options should close
document.onclick=check; 
function check(e){ 
    
var target = (e && e.target) || (event && event.srcElement); 
    
var obj1 = document.getElementById('option_placeholder'); 
    checkParent(target)?obj1.style.display=
'none':null

function checkParent(t){ 
    
while(t.parentNode){ 
        
var myPlaceholder = document.getElementById('option_placeholder');
        
var myTextbox = document.getElementById('text1');
        
var myImage = document.getElementById('imgText1');
        
var myTextbox2 = document.getElementById('text2');
        
var myImage2 = document.getElementById('imgText2');
        
if(t==myPlaceholder ||  t==myTextbox || t==myImage ||  t==myTextbox2 || t==myImage2){ 
            
return false 
        } 
        t=t.parentNode 
    } 
    
return true 


// show the options where the event took place
 function openCombo(textbox, div) {
        
var div = document.getElementById(div);
        
var box = document.getElementById(textbox);
        div.style.position = 
'absolute'
        
if(div.style.display=='none') {
        
var X = (findPosX(box)); 
        
var Y = findPosY(box) + 19;
        div.style.left =  (X - 1) + 
'px'
        div.style.top = Y + 
'px'
        div.style.display = 
'';
        } 
else {
            div.style.display = 
'none';
        }
    }
    
function findPosX(obj)
{
    
var curleft = 0;
    
if(obj.offsetParent)
        
while(1) 
        {
          curleft += obj.offsetLeft;
          
if(!obj.offsetParent)
            
break;
          obj = obj.offsetParent;
        }
    
else if(obj.x)
        curleft += obj.x;
    
return curleft;
}

function findPosY(obj)
{
    
var curtop = 0;
    
if(obj.offsetParent)
        
while(1)
        {
          curtop += obj.offsetTop;
          
if(!obj.offsetParent)
            
break;
          obj = obj.offsetParent;
        }
    
else if(obj.y)
        curtop += obj.y;
    
return curtop;
}
</script> 


CSS Styles:

    <style type="text/css">
    .combobox {
        
bordersolid 1px #7F9DB9;
        
padding0px;
        
margin0px;
    }
    
.combotext
    {
        
border-stylenone;
        
border-width0px;
        
padding1px;
        
margin0px;
    }
    
.comboOption {
        
font-familySans-Serif;
        
font-size10pt;
        
colorBlack;
        
cursordefault;
        
text-decoration:none;
    }
    
.comboOption a:active
    {
        
colorBlack;
        
text-decoration:none;
    }
    
.comboOption a:link
    {
        
colorBlack;
        
text-decoration:none;
    }
    
.comboOption a:visited
    {
        
colorBlack;
        
text-decoration:none;
    }
    
.comboOption a:hover 
    {
        
colorWhite;
        
text-decoration:none;
    }
    
</style>

Related Files
JavaScript ComboBox TimePicker Demo
Download the JavaScript, Styles, HTML and images for this demo.

Related Links
TimePicker Live Demo
See the ComboBox in action.

Was this solution useful? Yes No Added on 5 Aug 2008
Rating: 

Copyright 2010 © E-Centric, Inc. | Terms of Use