...

View Full Version : 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:


<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:



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum