Drop-down box

Objectives• Learn the HTML syntax of a drop-down list

• javascript properties of a list/menu:• length• options• selectedIndex

• The location sub-object of document

• The href property of location

HTML syntax

<form name="form1"> <select name="menu"> <option value="1">option 1</option> <option value="2">option 2</option> </select></form>

Javascript properties

To access the select element:document.form1.menu

Properties of the element:lengthoptions (an array)

options[n].valueoptions[n].text

selectedIndex

Event-handlers:onchange / onfocus /onblur

Example

<form name="form1"> Links <select name="links" onchange=“go()"> <option value=“http://www.google.com">Google</option> <option value=“http://www.facebook.com">Facebook</option> </select></form>

Example

<script type="text/javascript"> function go(){ var n = document.form1.links.selectedIndex; var url = document.form1.links.options[n].value; window.document.location.href = url; }</script>

Assignment• Modify the example by targeting the value of the options to

the src attribute of an iframe. (5 points)

• The html code for the iframe is: <iframe src="xx" width="100%" height="400" />