Regarding Element Adding via Select Options

SyntaxError · 09-04-2007, 11:34 PM

Today I have been trying to write a simple script. With selecting a certain "Option" via the Select Box, I'm trying to make the second Select Box correspond to the first. Sounds simple enough, though I'm finding some difficulties.

Here is the basic:

Code:

<html>

<head>
 <title>Index</title>
 <meta name="robots" content="noindex,nofollow" />
 <style type="text/css">
 </style>
<head>

<body>
 <script type="text/javascript">
fuction country()
{
var country;
var a=document.getElementById("us");
var b=document.getElementById("can");
var c=document.getElementById("misc");

if (country==a) document.write("<select><option>New 

Hampshire</option><option>Alabama</option<option>Alaska</option></select>");
else if (country==b) document.write("<select><option>New 

Brunswick</option><option>Alberta</option<option>Quebec</option></select>");
else (country==c) document.write("<select><option>England</option><option>France</option<option>China</option></select>");
}
 </script>

 <select>
  <option id="us" onselect="country()">United States</option>
  <option id="can" onselect="country()">Canada</option>
  <option id="misc" onselect="country()">Other</option>
 </select>
 
 <select>
 </select>
</body>

</html>

Many thanks in advance for any suggestions correcting my errors.

chump2877 · 09-05-2007, 12:48 AM

I was having trouble getting innerHTML to work for populating options of a select menu....I used the DOM instead to populate the second menu with different choices, and innerHTML to clear the select menu options when a new item in the first menu is selected:

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang=en>
<head>
 <title>Index</title>
 <meta name="robots" content="noindex,nofollow" />
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
 <style type="text/css">
 </style>
<head>
<body>
 <select onchange="country(this);">
  <option value="default">-- Select A Country --</option>
  <option value="us">United States</option>
  <option value="can">Canada</option>
  <option value="misc">Other</option>
 </select>
 <select id="secondMenu">
 </select>
 <script type="text/javascript">
function country(selectMenuObj)
{
 var usOptions = new Array("New Hampshire","Alabama","Alaska");
 var canOptions = new Array("New Brunswick","Alberta","Quebec");
 var miscOptions = new Array("England","France","China");
 var newtext, newoption;
 var tempArr = new Array();
 var secondMenu = document.getElementById("secondMenu");
 if (selectMenuObj.value == "us")
  tempArr = usOptions;
 else if (selectMenuObj.value == "can")
  tempArr = canOptions;
 else if (selectMenuObj.value == "misc")
  tempArr = miscOptions;
 else
  return;
 secondMenu.innerHTML = "";
 for (var i=0; i<tempArr.length; i++)
 {
  newtext = document.createTextNode(tempArr[i]);
  newoption = document.createElement("option");
  newoption.appendChild(newtext);
  secondMenu.appendChild(newoption);
 }
}
 </script>
</body>
</html>