Changing Select element content on the fly

Home

Changing a select element's content on the fly is a powerful feature of JavaScript that's just as practical. It forms the basis of implementing inter-dependant select menus, where the selection of one menu changes the contents of another. In this tutorial, lets look at how this is done, and also, how to create a 2 level interdependent select list using the technique. Sounds like fun!

The basic technique

The basic technique for changing a select element's content using JavaScript is a two part process. I'll use the following SELECT element as an example:

<form name="myform">
<select name="master" size="1">
<option value="newsvalue">News</option>
<option value="webmastervalue">Webmaster</option>
<option value="techvalue">Tech</option>
</select>
</form>

To change "master"s content using JavaScript, do the following:

1) Remove all options by setting the Options array's length to 0

document.myform.master.options.length=0

Doing the above instantly empties the select element, ready to be populated with new data.

2) Repopulate the select menu with new options (aka content), using the Option() constructor on each option:

document.myform.master.options[0]=new Option("Sports", "sportsvalue", true, false)
document.myform.master.options[1]=new Option("Music", "musicvalue", false, false)
document.myform.master.options[2]=new Option("Movies", "moviesvalue", false, false)

The select menu is now repopulated with 3 new entries ("Sports", "Music", and "Movies").

In case you're wondering, the Option() constructor supports the following four parameters, the later two optional:

new Option(text, value, defaultSelected, selected)

For more info, see Option() constructor in our JavaScript Reference.

Looping through and changing select element content

When repopulating a select element's content, you may want to use a loop instead of changing each option one by one. Furthermore, the total number of options may not be known in advance (such as 3 above), so you need a dynamic way to add new options to select. In this case, use the below:

var master=document.myform.master
for (i=0; i<somevariable; i++){
	master.options[master.options.length]=new Option(...)
}

The key here is the property "options.length", which automatically adds 1 to the current length of the select element. This lets you add new options to the end of the select element without knowing any info about its existing length.

Removing a single option within select

Moving on, you can also selectively remove a single option without performing mass destruction on all options within select first. This is done by setting the desired option to null. Doing so removes the option from the list, with the options below it moving up to occupy the void:

document.myform.master.options[1]=null

Removing multiple options (from the end of the list)

You can also easily remove multiple options from select, provided they are at the end of the list. Simply set the Options Array's length to something smaller than its current length, and say bye bye to options that fall after the new length in index:

document.myform.master.options.length=1

This removes all options within the select except for the very first one.

Ok, so far so good right? Now lets use our new found knowledge to create a classic two level inter-dependant select list.

Changing Select element content on the fly (current page)
Creating a 2 level interdependent select list

Creating a 2 level interdependent select list