Javascript Options

Changing Options Dynamically

This example demonstrates how to change selection options dynamically.

The attribute SIZE of the SELECT tag creates a list box with number of items specified by SIZE. If you leave out SIZE, you will get a drop down box instead.

The Script

<HTML>
<HEAD>
<TITLE>Test Input Validation</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function change (form) {

form.list.options[0].text = "Choice1"
form.list.options[1].text = "Choice2"
form.list.options[2].text = "Choice3"

}
function myreset(form){
form.list.options[0].text = "item 1"
form.list.options[1].text = "item 2"
form.list.options[2].text = "item 3"
}

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
<INPUT TYPE="button" NAME="button1" Value="Change" onClick="change(this.form)">

<SELECT NAME="list" SIZE="3">
<OPTION>item 1
<OPTION>item 2
<OPTION>item 3

</SELECT></br>
<INPUT TYPE="button" NAME="button2" Value="Reset" onClick="myreset(this.form)">
</FORM>

</BODY>
</HTML>

Javascript Options

Changing Options Dynamically

The Script

The Output