Difference between revisions of "Add Options to a Combo Box Using JavaScript"

Revision as of 10:55, 4 August 2009

You can use a JavaScript function to modify the options available in a pull-down box on the page.

The following example adds a new blank selection at the top of the starthour, startminute, endhour and endminute fields at Level 2 for new records:

function clearTimes()
 {
var frm = document.forms[0];
// at Level 1 use document.form1 instead of document.forms[0]

if (frm.startdate.value=="")
{
   try
   {
       frm.starthour.add(new Option("", "", true, true), frm.starthour.options[0]) //add blank option to beginning of starthour
       frm.startminute.add(new Option("", "", true, true), frm.startminute.options[0])
       frm.endhour.add(new Option("", "", true, true), frm.endhour.options[0])
       frm.endminute.add(new Option("", "", true, true), frm.endminute.options[0]) 
   }
   catch(e)
   { //in IE, try the below version instead of add()
       frm.starthour.add(new Option("", "", true, true), 0) //add blank option to beginning of starthour
       frm.startminute.add(new Option("", "", true, true), 0)
       frm.endhour.add(new Option("", "", true, true), 0) 
       frm.endminute.add(new Option("", "", true, true), 0)
   }
}
}
clearTimes();

The options available are:

document.forms[0].starthour.add(new Option(Display text, Store value, defaultSelected, selected), document.forms[0].starthour.options[0])

Note: the same syntax can be used at Level 1, replacing document.forms[0] with document.form1