Introduction To Javascript
Dynamic Menus

Javascript allows you to change the information in your form. This facility allows you to change the page depending on how the user interacts with it. An example of how this might come in useful is in the dynamic menu system. The script and HTML below create 2 menus. The contents of the second dropdown menu change when an option is selected in the first dropdown menu.

HTML

<form name="men2">
<select name="sel1" onchange="swapmen()">
<option SELECTED>one</option>
<option>ONE</option>
</select>
<select name="sel2">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</form>

Javscript in <head>

<script type="text/javascript">
//These are the variables for our menus.
var onetext = new Array("one", "two", "three")
var oneval = new Array("1", "2", "3")
var ONEtext = new Array("ONE", "TWO")
var ONEval = new Array("1","2")
//this is the function to swap over our menus
function swapmen() {
//this bit clears the options out of the second menu
var x = document.men2.sel2.options.length
for (var i=0;i<x;i++) {
document.men2.sel2.options[i]=null
}
// works out which menu to make
var which = document.men2.sel1.selectedIndex
if (which==0) {
var x = onetext.length
for (var i=0;i<x;i++) {
document.men2.sel2.options[i] = new Option(onetext[i], oneval[i])
}
}
if (which==1) {
var x = ONEtext.length
for (var i=0;i<x;i++) {
document.men2.sel2.options[i] = new Option(ONEtext[i],ONEval[i])
}
}
}
</script>

Exercise 14

Copy and adapt the above script to make a page with 2 different menus of links to the WWW. Add a button to the page and a function to load the web pages.