July 30, 2000 - Adding Menu Options

July 30, 2000 Adding More Options On Line Tips: July 2000 Yehuda Shiran, Ph.D. Doc JavaScript

<SELECT ID="oSelect">
  <OPTION>List of options to be added
</SELECT>

When you want to add an option, first create a new Option object:

oNewOption = new Option();

Then populate its text property. Let's concatenate a number to the string "Option":

oNewOption.text = "Option " + optionNo;

And finally, let's add the new option to the oSelect object above:

oSelect.add(oNewOption, 0);

The second parameter may take the following values:

• 0: Add the new option at the top of the list.

• 1: Add the new option at the end of the list.

• n: Limit the number of new options to n.

List of options to be added

Here is the HTML definition of the button and the SELECT box:

<INPUT TYPE="BUTTON" VALUE="Add An Option" onclick="addNewOption()">
<SELECT ID="oSelect">
  <OPTION>List of options to be added
</SELECT>

And here is the script that handles the clicks:

<SCRIPT>
<!--
var optionNo = 0;
function addNewOption() {
  optionNo += 1;
  oNewOption = new Option();
  oNewOption.text = "Option " + optionNo;
  oSelect.add(oNewOption, 1);
}
// -->
</SCRIPT>