Mega Code Archive
Changing Select Element Content (two Combobox)
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O'Reilly & Associates
Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 8.13</title>
<style rel="stylesheet" id="mainStyle" type="text/css">
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}
</style>
<script type="text/javascript">
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);
}
}
}
**********/
</script>
</head>
<body>
<h1>Changing Select Element Content</h1>
<hr />
<form name="dealers" ...>
...
Submit Request to: <select name="continent" onchange="setCities(this)">
<option value="" selected>Choose a Region:</option>
<option value="africa">Africa</option>
<option value="asia">Asia</option>
<option value="australia">Australia/Pacific</option>
<option value="europe">Europe</option>
<option value="noamer">North America</option>
<option value="soamer">South America</option>
</select>
<select name="city">
<option value="" selected>Choose a City:</option>
</select>
...
</form>
</body>
</html>
]]>