| Multiwingspan Home Page |
| Multiwingspan Games |
| Gnasher @ Multiwingspan |
| Multiwingspan Calendar |
| Multiwingspan Clock |
| About Multiwingspan |
| Visual Basic 6.0 Guide |
| Visual Basic 6.0 Examples |
| Turbo Pascal Guide |
| SWI Prolog Guide |
| Visual Basic 2005 Guide |
| Structured Query Language |
| HTML Design Tasks |
| Introduction To HTML |
| Introduction To CSS |
| Introduction To Javascript |
| AS/A2 Level Computing |
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.
<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>
<script language="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>
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.
Return To Javascript Guide || Return To Homepage