JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

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>


The Output






Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy