Smart questions
Smart answers
Smart people
Join Tek-Tips Forums
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • 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!

Join Tek-Tips
*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
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

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