"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
Recipe 8.13
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
var regiondb = new Object()
regiondb["africa"] = [{value:"102", text:"Cairo"},
{value:"88", text:"Lagos"},
{value:"80", text:"Nairobi"},
{value:"55", text:"Pretoria"}];
regiondb["asia"] = [{value:"30", text:"Ankara"},
{value:"21", text:"Bangkok"},
{value:"49", text:"Beijing"},
{value:"76", text:"New Delhi"},
{value:"14", text:"Tokyo"}];
regiondb["australia"] = [{value:"64", text:"Suva"},
{value:"12", text:"Sydney"}];
regiondb["europe"] = [{value:"11", text:"Athens"},
{value:"35", text:"Frankfurt"},
{value:"3", text:"London"},
{value:"15", text:"Madrid"},
{value:"1", text:"Paris"},
{value:"10", text:"Rome"},
{value:"6", text:"Stockholm"},
{value:"97", text:"St. Petersburg"}];
regiondb["noamer"] = [{value:"73", text:"Dallas"},
{value:"71", text:"Los Angeles"},
{value:"5", text:"New York"},
{value:"37", text:"Toronto"}];
regiondb["soamer"] = [{value:"65", text:"Buenos Aires"},
{value:"31", text:"Caracas"},
{value:"66", text:"Rio di Janeiro"}];
function setCities(chooser) {
var newElem;
var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
var cityChooser = chooser.form.elements["city"];
while (cityChooser.options.length) {
cityChooser.remove(0);
}
var choice = chooser.options[chooser.selectedIndex].value;
var db = regiondb[choice];
newElem = document.createElement("option");
newElem.text = "Choose a City:";
newElem.value = "";
cityChooser.add(newElem, where);
if (choice != "") {
for (var i = 0; i < db.length; i++) {
newElem = document.createElement("option");
newElem.text = db[i].text;
newElem.value = db[i].value;
cityChooser.add(newElem, where);
}
}
}
/**********
DOM LEVEL 0 ALTERNATE
**********
function setCities(chooser) {
var cityChooser = chooser.form.elements["city"];
// empty previous settings
cityChooser.options.length = 0;
// get chosen value to act as index to regiondb hash table
var choice = chooser.options[chooser.selectedIndex].value;
var db = regiondb[choice];
// insert default first item
cityChooser.options[0] = new Option("Choose a City:", "", true, false);
if (choice != "") {
// loop through array of the hash table entry, and populate options
for (var i = 0; i < db.length; i++) {
cityChooser.options[i + 1] = new Option(db[i].text, db[i].value);
}
}
}
**********/
Changing Select Element Content
...
Submit Request to:
Choose a Region:
Africa
Asia
Australia/Pacific
Europe
North America
South America
Choose a City:
...