Adding New Options - Page 18
October 5, 2001
To add a new option to a select element, we simply create a new
Option object using the new operator, and then insert it into the
options[] array of the Select object at an empty index position.
When creating a new Option object there are two parameters to
pass, the first is the text you want to appear in the list, the
second the value to be assigned to the option.
var myNewOption = new Option("TheText","TheValue");
We then simply assign this Option object to an empty array
element, for example:
document.theForm.theSelectObject.options[0] = myNewOption;
If you want to remove an option you simply set that part of the
options[] array to null. For example, to remove the element we
just inserted above, we need:
document.theForm.theSelectObject.options[0] = null;
When you remove an Option object from the options[] array, the
array is reordered so that the array index values of all the
options above the removed one have their index value decremented
by one.
When you insert a new option at a certain index position, beware
that it will overwrite any Option object that is already there.
Try It Out – Adding and Removing List Options
Let's use the 'list of days' example we saw above to demonstrate
adding and removing list options.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function butRemoveWed_onclick()
{
if (document.form1.theDay.options[2].text == "Wednesday")
{
document.form1.theDay.options[2] = null;
}
else
{
alert('There is no Wednesday here!');
}
}
function butAddWed_onclick()
{
if (document.form1.theDay.options[2].text != "Wednesday")
{
var indexCounter;
var days = document.form1.theDay;
var lastoption = new Option();
days.options[6] = lastoption;
for (indexCounter = 6;indexCounter > 2; indexCounter--)
{
days.options[indexCounter].text = days.options[indexCounter -
1].text;
days.options[indexCounter].value = days.options[indexCounter -
1].value;
}
var option = new Option("Wednesday",2);
days.options[2] = option;
}
else
{
alert('Do you want to have TWO Wednesdays?????');
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1>
<SELECT NAME=theDay SIZE=5>
<OPTION VALUE=0 SELECTED>Monday
<OPTION VALUE=1>Tuesday
<OPTION VALUE=2>Wednesday
<OPTION VALUE=3>Thursday
<OPTION VALUE=4>Friday
<OPTION VALUE=5>Saturday
<OPTION VALUE=6>Sunday
</SELECT>
<BR>
<INPUT TYPE="button" VALUE="Remove Wednesday" NAME=butRemoveWed
onclick="butRemoveWed_onclick()">
<INPUT TYPE="button" VALUE="Add Wednesday" NAME=butAddWed
onclick="butAddWed_onclick()">
<BR>
</FORM>
</BODY>
</HTML>
[The colored lines above are one line. They have been split
for formatting purposes.]
Save this as ch6_examp7.htm.
If you type the page in and load it into your browser, you should
see the form below. Click the Remove Wednesday button and you'll
see it disappear from the list. Add it back by clicking the Add
Wednesday button. If you try and add a second Wednesday or remove
a non-existent Wednesday, then you'll get a polite warning
telling you that you can't do that.
The Select Elements - Page 17
Beginning JavaScript
How It Works - Page 19
|
