Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.


Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

dynamic listboxes !

Creating new select list options dynamically by simonchristieis
Posted: 23 Jan 04 (Edited 6 Feb 04)

I have seen several posts recently on the subject of creating drop down lists dynamically.

So I thought I'd write a small FAQ.

Here's how to delete the options of an existing select element.

When I create select boxes I always display a message in the first option ("** Select **"), so when I'm deleting options I leave this one alone, if you want to delete all options then change this line:

while(objSelect.options.length > 1)
while(objSelect.options.length > 0)

f = form name
e = select name

function clearSelect(f,e){
var objSelect=document.forms[f].elements[e];
while(objSelect.options.length > 1){objSelect.remove(1);}
return objSelect;

This is how we can create a new element.

function createOption(f,e,newValue,newText){

var objSelect=document.forms[f].elements[e];
var objOption = document.createElement("option");
objOption.text = newText
objOption.value = newValue

if(document.all && !window.opera)
  {objSelect.add(objOption, null);};


So there are your basic functions to create a dynamic select object.

Moving on from this if you want to create dynamic optgroups, use

Thanks to mwolf00 for the following:

function create(){

optGroup = document.createElement('optgroup')

var objSelect=document.forms(0).elements(0);
var objOption=document.createElement("option")

objOption.innerHTML = "tset"
objOption.value = "simon"

optGroup.label = "simple"


Back to Javascript FAQ Index
Back to Javascript Forum

My Archive


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close