July 30, 2000 - Adding Menu Options

Yehuda Shiran July 30, 2000
Adding More Options On Line
Tips: July 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Sometimes you need to add options to a SELECT element on line. For example, let's take the following element:

<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:

Clicking the button below will add a new option to the list:

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>