INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

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

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)
to
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);}
 else
  {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"

objSelect.appendChild(optGroup)
optGroup.appendChild(objOption)
}

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

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