Changing Select element
content on the fly
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.
|
