...

View Full Version : problem with dynamic menus



f16fan12
07-11-2006, 08:46 PM
Hello,
I'm trying to make two drop down lists. The first will be a list of regions, such as USA and Canada. The second will contain cities within those regions, such as Washington or Ottawa. The second's content will be conditional upon the user's selection of the region. I have this so far:


<html>
<script language="javascript">

canadacities = new Array (
"Alert, NU", 82, 31, 0, 62, 20, 0, 29.0, -4.0,
"Calgary, AB", 51, 3, 0, 114, 5, 0,1079.0, -7.0,
"Charlottetown, PE", 46, 14, 0, 63, 8, 0, 55.2, -4.0,
"Churchill, MB", 58, 46, 0, 94, 10, 0, 28.7, -6.0,
"Edmonton, AB", 53, 33, 0, 113, 28, 0, 676.4, -7.0,
"Fredericton, NB", 45, 58, 0, 66, 39, 0, 8.8, -4.0,
"Halifax, NS", 44, 39, 0, 63, 36, 0, 25.3, -4.0,
"Hamilton, ON", 43, 15, 0, 79, 51, 0, 100.3, -5.0,
"Inuvik, NT", 68, 25, 0, 133, 30, 0, 0.0, -7.0,
"Iqaluit, NU", 63, 44, 0, 68, 28, 0, 33.5, -5.0,
"Kuujjuaq, QC", 58, 6, 0, 68, 25, 0, 0.0, -5.0,
"Lethbridge, AB", 49, 42, 0, 112, 50, 0, 909.8, -7.0,
"London, ON", 42, 59, 0, 81, 14, 0, 250.5, -5.0,
"Montreal, QC", 45, 31, 0, 73, 34, 0, 57.0, -5.0,
"Ottawa, ON", 45, 25, 0, 75, 42, 0, 114.0, -5.0,
"Prince George, BC", 53, 55, 0, 122, 45, 0, 676.0, -8.0,
"Quebec, QC", 46, 49, 0, 71, 14, 0, 72.8, -5.0,
"Regina, SK", 50, 25, 0, 104, 39, 0, 574.2, -6.0,
"Resolute, NU", 74, 41, 0, 94, 54, 0, 67.1, -6.0,
"Saint John's, NF", 47, 34, 0, 52, 43, 0, 64.3, -3.5,
"Saskatoon, SK", 52, 7, 0, 106, 38, 0, 515.1, -6.0,
"Sault Sainte Marie, ON", 46, 31, 0, 84, 20, 0, 179.5, -5.0,
"Thunder Bay, ON", 48, 23, 0, 89, 15, 0, 187.8, -5.0,
"Toronto, ON", 43, 39, 0, 79, 23, 0, 115.5, -5.0,
"Vancouver, BC", 49, 16, 0, 123, 7, 0, 38.7, -8.0,
"Victoria, BC", 48, 25, 0, 123, 22, 0, 17.4, -5.0,
"Whitehorse, YT", 60, 43, 0, 135, 3, 0, 702.0, -8.0,
"Winnipeg, MB", 49, 53, 0, 97, 9, 0, 238.7, -6.0,
"Windsor, ON", 42, 18, 0, 83, 1, 0, 183.8, -5.0,
"Yellowknife, NT", 62, 27, 0, 114, 21, 0, 205.4, -7.0
)

uscities = new Array(
"Akron, OH", 41, 5, 0, 81, 30, 0, 266.4, -5.0,
"Albany, NY", 42, 39, 0, 73, 45, 0, 83.8, -5.0,
"Allentown, PA", 40, 35, 0, 75, 30, 0, 77.7, -5.0,
"Atlanta, GA", 33, 44, 0, 84, 23, 0, 307.8, -5.0,
"Austin, TX", 30, 16, 0, 97, 44, 0, 182.0, -6.0,
"Baltimore, MD", 39, 17, 0, 76, 36, 0, 45.1, -5.0,
"Baton Rouge, LA", 30, 27, 0, 91, 9, 0, 17.4, -6.0,
"Birmingham, AL", 33, 31, 0, 86, 48, 0, 189.0, -6.0,
"Boise, ID", 43, 36, 0, 116, 12, 0, 865.0, -7.0,
"Boston, MA", 42, 21, 0, 71, 3, 0, 4.6, -5.0,
"Buffalo, NY", 42, 53, 0, 78, 52, 0, 214.9, -5.0,
"Charleston, WV", 38, 20, 0, 81, 37, 0, 286.2, -5.0,
"Chicago, IL", 41, 51, 0, 87, 39, 0, 185.0, -6.0,
"Cincinnati, OH", 39, 9, 0, 84, 27, 0, 264.9, -5.0,
"Cleveland, OH", 41, 29, 0, 81, 41, 0, 236.8, -5.0,
"Columbia, SC", 34, 0, 0, 81, 2, 0, 57.9, -5.0,
"Columbus, OH", 39, 57, 0, 82, 59, 0, 247.5, -5.0,
"Dallas, TX", 32, 46, 0, 96, 47, 0, 167.9, -6.0,
"Dayton, OH", 39, 45, 0, 84, 15, 0, 175.0, -5.0,
"Denver, CO", 39, 44, 0, 104, 59, 0,1610.3, -7.0,
"Des Moines, IA", 41, 36, 0, 93, 36, 0, 285.9, -6.0,
"Detroit, MI", 42, 20, 0, 83, 3, 0, 192.9, -5.0,
"El Paso, TX", 31, 45, 0, 106, 29, 0,1194.2, -7.0,
"Flint, MI", 43, 1, 0, 83, 41, 0, 228.6, -5.0,
"Grand Rapids, MI", 42, 58, 0, 85, 40, 0, 239.0, -5.0,
"Harrisburg, PA", 40, 16, 0, 76, 53, 0, 111.3, -5.0,
"Hartford, CT", 41, 46, 0, 72, 41, 0, 51.5, -5.0,
"Honolulu, HI", 21, 18, 0, 157, 51, 0, 2.1, -10.0,
"Houston, TX", 29, 45, 0, 95, 21, 0, 29.3, -6.0,
"Indianapolis, IN", 39, 46, 0, 86, 9, 0, 241.4, -5.0,
"Jackson, MS", 32, 17, 0, 90, 11, 0, 88.7, -6.0,
"Jacksonville, FL", 30, 19, 0, 81, 39, 0, 6.1, -5.0,
"Kansas City, MO", 39, 5, 0, 94, 34, 0, 226.2, -6.0,
"Lansing, MI", 42, 43, 0, 84, 33, 0, 253.0, -5.0,
"Lincoln, NE", 40, 48, 0, 96, 40, 0, 350.5, -6.0,
"Little Rock, AR", 34, 44, 0, 92, 17, 0, 78.3, -6.0,
"Los Angeles, CA", 34, 3, 0, 118, 14, 0, 29.6, -8.0,
"Louisville, KY", 38, 15, 0, 85, 45, 0, 145.4, -5.0,
"Madison, WI", 43, 4, 0, 89, 24, 0, 262.1, -6.0,
"Memphis, TN", 35, 8, 0, 90, 2, 0, 78.6, -6.0,
"Miami, FL", 25, 46, 0, 80, 11, 0, 2.1, -5.0,
"Milwaukee, WI", 43, 2, 0, 87, 54, 0, 204.8, -6.0,
"Minneapolis, MN", 44, 58, 0, 93, 15, 0, 254.2, -6.0,
"Montgomery, AL", 32, 23, 0, 86, 18, 0, 48.8, -6.0,
"Nashville, TN", 36, 9, 0, 86, 47, 0, 179.8, -6.0,
"New Haven, CT", 41, 18, 0, 72, 56, 0, 12.2, -5.0,
"New Orleans, LA", 29, 57, 0, 90, 4, 0, 0.9, -6.0,
"New York, NY", 40, 43, 0, 74, 1, 0, 40.2, -5.0,
"Norfolk, VA", 36, 50, 0, 76, 17, 0, 3.0, -5.0,
"Oklahoma City, OK", 35, 28, 0, 97, 30, 0, 391.7, -6.0,
"Omaha, NE", 41, 15, 0, 95, 56, 0, 303.9, -6.0,
"Orlando, FL", 28, 32, 0, 81, 22, 0, 21.3, -5.0,
"Philadelphia, PA", 39, 57, 0, 75, 9, 0, 1.5, -5.0,
"Phoenix, AZ", 33, 26, 0, 112, 4, 0, 340.5, -7.0,
"Pittsburgh, PA", 40, 26, 0, 79, 59, 0, 227.7, -5.0,
"Portland, OR", 45, 31, 0, 122, 40, 0, 6.4, -8.0,
"Providence, RI", 41, 49, 0, 71, 24, 0, 15.5, -5.0,
"Raleigh, NC", 35, 46, 0, 78, 38, 0, 132.3, -5.0,
"Richmond, VA", 37, 33, 0, 77, 27, 0, 50.0, -5.0,
"Riverside, CA", 33, 57, 0, 117, 23, 0, 0.0, -8.0,
"Rochester, NY", 43, 9, 0, 77, 36, 0, 166.7, -5.0,
"Sacramento, CA", 38, 34, 0, 121, 29, 0, 9.1, -8.0,
"St. Paul, MN", 44, 57, 0, 93, 5, 0, 237.7, -6.0,
"St. Louis, MO", 38, 37, 0, 90, 11, 0, 163.1, -6.0,
"St. Petersburg, FL", 27, 46, 0, 82, 40, 0, 6.1, -5.0,
"Salem, OR", 44, 56, 0, 123, 2, 0, 47.2, -8.0,
"Salt Lake City, UT", 40, 45, 0, 111, 53, 0,1286.3, -7.0,
"San Antonio, TX", 29, 25, 0, 98, 29, 0, 240.2, -6.0,
"San Diego, CA", 32, 42, 0, 117, 9, 0, 4.0, -8.0,
"San Francisco, CA", 37, 46, 0, 122, 25, 0, 2.4, -8.0,
"San Jose, CA", 37, 20, 0, 121, 53, 0, 27.4, -8.0,
"Seattle, WA", 47, 36, 0, 122, 19, 0, 121.9, -8.0,
"Springfield, IL", 39, 48, 0, 89, 38, 0, 185.9, -6.0,
"Syracuse, NY", 43, 2, 0, 76, 8, 0, 125.0, -5.0,
"Tallahassee, FL", 30, 26, 0, 84, 16, 0, 45.7, -5.0,
"Tampa, FL", 27, 56, 0, 82, 27, 0, 5.8, -5.0,
"Toledo, OH", 41, 39, 0, 83, 33, 0, 178.3, -5.0,
"Topeka, KS", 39, 2, 0, 95, 40, 0, 283.5, -6.0,
"Tulsa, OK", 36, 9, 0, 95, 59, 0, 245.1, -6.0,
"Washington, DC", 38, 53, 0, 77, 2, 0, 4.3, -5.0
)




function populateCity() {


if (document.myForm.regions.options[document.myForm.regions.selectedIndex].value = 0)
{
document.myForm.city.options.length = 0
for(index = 0; index<100; index + 9)
{

chosen = uscities[index]
document.myForm.city.options[chosen] = new Option(chosen)


}
}
}

</script>
<body onload="document.myForm.regions.selectedIndex=0">
<form action="#" name="myForm">

<select name ="regions" onchange="populateCity()">
<option value = ""> Region </option>
<option value="0"> United States </option>
<option value="1"> Canada </option>
</select>

<br>


<select name="city">
<option>City</option>
</select>

</form>


</html>



I don't really know what to do next. I assume I need some kind of loop to add nine to the 'index' value, so that a new option under the city menu is made with the next city. What should I do?
Thanks.

vwphillips
07-11-2006, 10:21 PM
<html>
<script language="javascript">

canadacities = new Array (
["Alert, NU", 82, 31, 0, 62, 20, 0, 29.0, -4.0],
["Calgary, AB", 51, 3, 0, 114, 5, 0,1079.0, -7.0],
["Charlottetown, PE", 46, 14, 0, 63, 8, 0, 55.2, -4.0],
["Churchill, MB", 58, 46, 0, 94, 10, 0, 28.7, -6.0],
["Edmonton, AB", 53, 33, 0, 113, 28, 0, 676.4, -7.0],
["Fredericton, NB", 45, 58, 0, 66, 39, 0, 8.8, -4.0],
["Halifax, NS", 44, 39, 0, 63, 36, 0, 25.3, -4.0],
["Hamilton, ON", 43, 15, 0, 79, 51, 0, 100.3, -5.0],
["Inuvik, NT", 68, 25, 0, 133, 30, 0, 0.0, -7.0],
["Iqaluit, NU", 63, 44, 0, 68, 28, 0, 33.5, -5.0],
["Kuujjuaq, QC", 58, 6, 0, 68, 25, 0, 0.0, -5.0],
["Lethbridge, AB", 49, 42, 0, 112, 50, 0, 909.8, -7.0],
["London, ON", 42, 59, 0, 81, 14, 0, 250.5, -5.0],
["Montreal, QC", 45, 31, 0, 73, 34, 0, 57.0, -5.0],
["Ottawa, ON", 45, 25, 0, 75, 42, 0, 114.0, -5.0],
["Prince George, BC", 53, 55, 0, 122, 45, 0, 676.0, -8.0],
["Quebec, QC", 46, 49, 0, 71, 14, 0, 72.8, -5.0],
["Regina, SK", 50, 25, 0, 104, 39, 0, 574.2, -6.0],
["Resolute, NU", 74, 41, 0, 94, 54, 0, 67.1, -6.0],
["Saint John's, NF", 47, 34, 0, 52, 43, 0, 64.3, -3.5],
["Saskatoon, SK", 52, 7, 0, 106, 38, 0, 515.1, -6.0],
["Sault Sainte Marie, ON", 46, 31, 0, 84, 20, 0, 179.5, -5.0],
["Thunder Bay, ON", 48, 23, 0, 89, 15, 0, 187.8, -5.0],
["Toronto, ON", 43, 39, 0, 79, 23, 0, 115.5, -5.0],
["Vancouver, BC", 49, 16, 0, 123, 7, 0, 38.7, -8.0],
["Victoria, BC", 48, 25, 0, 123, 22, 0, 17.4, -5.0],
["Whitehorse, YT", 60, 43, 0, 135, 3, 0, 702.0, -8.0],
["Winnipeg, MB", 49, 53, 0, 97, 9, 0, 238.7, -6.0],
["Windsor, ON", 42, 18, 0, 83, 1, 0, 183.8, -5.0],
["Yellowknife, NT", 62, 27, 0, 114, 21, 0, 205.4, -7.0]
)

uscities = new Array(
["Akron, OH", 41, 5, 0, 81, 30, 0, 266.4, -5.0],
["Albany, NY", 42, 39, 0, 73, 45, 0, 83.8, -5.0],
["Allentown, PA", 40, 35, 0, 75, 30, 0, 77.7, -5.0],
["Atlanta, GA", 33, 44, 0, 84, 23, 0, 307.8, -5.0],
["Austin, TX", 30, 16, 0, 97, 44, 0, 182.0, -6.0],
["Baltimore, MD", 39, 17, 0, 76, 36, 0, 45.1, -5.0],
["Baton Rouge, LA", 30, 27, 0, 91, 9, 0, 17.4, -6.0],
["Birmingham, AL", 33, 31, 0, 86, 48, 0, 189.0, -6.0],
["Boise, ID", 43, 36, 0, 116, 12, 0, 865.0, -7.0],
["Boston, MA", 42, 21, 0, 71, 3, 0, 4.6, -5.0],
["Buffalo, NY", 42, 53, 0, 78, 52, 0, 214.9, -5.0],
["Charleston, WV", 38, 20, 0, 81, 37, 0, 286.2, -5.0],
["Chicago, IL", 41, 51, 0, 87, 39, 0, 185.0, -6.0],
["Cincinnati, OH", 39, 9, 0, 84, 27, 0, 264.9, -5.0],
["Cleveland, OH", 41, 29, 0, 81, 41, 0, 236.8, -5.0],
["Columbia, SC", 34, 0, 0, 81, 2, 0, 57.9, -5.0],
["Columbus, OH", 39, 57, 0, 82, 59, 0, 247.5, -5.0],
["Dallas, TX", 32, 46, 0, 96, 47, 0, 167.9, -6.0],
["Dayton, OH", 39, 45, 0, 84, 15, 0, 175.0, -5.0],
["Denver, CO", 39, 44, 0, 104, 59, 0,1610.3, -7.0],
["Des Moines, IA", 41, 36, 0, 93, 36, 0, 285.9, -6.0],
["Detroit, MI", 42, 20, 0, 83, 3, 0, 192.9, -5.0],
["El Paso, TX", 31, 45, 0, 106, 29, 0,1194.2, -7.0],
["Flint, MI", 43, 1, 0, 83, 41, 0, 228.6, -5.0],
["Grand Rapids, MI", 42, 58, 0, 85, 40, 0, 239.0, -5.0],
["Harrisburg, PA", 40, 16, 0, 76, 53, 0, 111.3, -5.0],
["Hartford, CT", 41, 46, 0, 72, 41, 0, 51.5, -5.0],
["Honolulu, HI", 21, 18, 0, 157, 51, 0, 2.1, -10.0],
["Houston, TX", 29, 45, 0, 95, 21, 0, 29.3, -6.0],
["Indianapolis, IN", 39, 46, 0, 86, 9, 0, 241.4, -5.0],
["Jackson, MS", 32, 17, 0, 90, 11, 0, 88.7, -6.0],
["Jacksonville, FL", 30, 19, 0, 81, 39, 0, 6.1, -5.0],
["Kansas City, MO", 39, 5, 0, 94, 34, 0, 226.2, -6.0],
["Lansing, MI", 42, 43, 0, 84, 33, 0, 253.0, -5.0],
["Lincoln, NE", 40, 48, 0, 96, 40, 0, 350.5, -6.0],
["Little Rock, AR", 34, 44, 0, 92, 17, 0, 78.3, -6.0],
["Los Angeles, CA", 34, 3, 0, 118, 14, 0, 29.6, -8.0],
["Louisville, KY", 38, 15, 0, 85, 45, 0, 145.4, -5.0],
["Madison, WI", 43, 4, 0, 89, 24, 0, 262.1, -6.0],
["Memphis, TN", 35, 8, 0, 90, 2, 0, 78.6, -6.0],
["Miami, FL", 25, 46, 0, 80, 11, 0, 2.1, -5.0],
["Milwaukee, WI", 43, 2, 0, 87, 54, 0, 204.8, -6.0],
["Minneapolis, MN", 44, 58, 0, 93, 15, 0, 254.2, -6.0],
["Montgomery, AL", 32, 23, 0, 86, 18, 0, 48.8, -6.0],
["Nashville, TN", 36, 9, 0, 86, 47, 0, 179.8, -6.0],
["New Haven, CT", 41, 18, 0, 72, 56, 0, 12.2, -5.0],
["New Orleans, LA", 29, 57, 0, 90, 4, 0, 0.9, -6.0],
["New York, NY", 40, 43, 0, 74, 1, 0, 40.2, -5.0],
["Norfolk, VA", 36, 50, 0, 76, 17, 0, 3.0, -5.0],
["Oklahoma City, OK", 35, 28, 0, 97, 30, 0, 391.7, -6.0],
["Omaha, NE", 41, 15, 0, 95, 56, 0, 303.9, -6.0],
["Orlando, FL", 28, 32, 0, 81, 22, 0, 21.3, -5.0],
["Philadelphia, PA", 39, 57, 0, 75, 9, 0, 1.5, -5.0],
["Phoenix, AZ", 33, 26, 0, 112, 4, 0, 340.5, -7.0],
["Pittsburgh, PA", 40, 26, 0, 79, 59, 0, 227.7, -5.0],
["Portland, OR", 45, 31, 0, 122, 40, 0, 6.4, -8.0],
["Providence, RI", 41, 49, 0, 71, 24, 0, 15.5, -5.0],
["Raleigh, NC", 35, 46, 0, 78, 38, 0, 132.3, -5.0],
["Richmond, VA", 37, 33, 0, 77, 27, 0, 50.0, -5.0],
["Riverside, CA", 33, 57, 0, 117, 23, 0, 0.0, -8.0],
["Rochester, NY", 43, 9, 0, 77, 36, 0, 166.7, -5.0],
["Sacramento, CA", 38, 34, 0, 121, 29, 0, 9.1, -8.0],
["St. Paul, MN", 44, 57, 0, 93, 5, 0, 237.7, -6.0],
["St. Louis, MO", 38, 37, 0, 90, 11, 0, 163.1, -6.0],
["St. Petersburg, FL", 27, 46, 0, 82, 40, 0, 6.1, -5.0],
["Salem, OR", 44, 56, 0, 123, 2, 0, 47.2, -8.0],
["Salt Lake City, UT", 40, 45, 0, 111, 53, 0,1286.3, -7.0],
["San Antonio, TX", 29, 25, 0, 98, 29, 0, 240.2, -6.0],
["San Diego, CA", 32, 42, 0, 117, 9, 0, 4.0, -8.0],
["San Francisco, CA", 37, 46, 0, 122, 25, 0, 2.4, -8.0],
["San Jose, CA", 37, 20, 0, 121, 53, 0, 27.4, -8.0],
["Seattle, WA", 47, 36, 0, 122, 19, 0, 121.9, -8.0],
["Springfield, IL", 39, 48, 0, 89, 38, 0, 185.9, -6.0],
["Syracuse, NY", 43, 2, 0, 76, 8, 0, 125.0, -5.0],
["Tallahassee, FL", 30, 26, 0, 84, 16, 0, 45.7, -5.0],
["Tampa, FL", 27, 56, 0, 82, 27, 0, 5.8, -5.0],
["Toledo, OH", 41, 39, 0, 83, 33, 0, 178.3, -5.0],
["Topeka, KS", 39, 2, 0, 95, 40, 0, 283.5, -6.0],
["Tulsa, OK", 36, 9, 0, 95, 59, 0, 245.1, -6.0],
["Washington, DC", 38, 53, 0, 77, 2, 0, 4.3, -5.0]
)


var SelAry=[[],uscities,canadacities,]

function populateCity(obj,sel) {
var ary=SelAry[obj.selectedIndex];
var sel=obj.form[sel];
sel.options.length=1;
for (var zxc0=0;zxc0<ary.length-8;zxc0++){
sel.options[zxc0+1]=new Option(ary[zxc0][0],zxc0,true,true);
}
sel.selectedIndex=0;
}

</script>
<body onload="document.myForm.regions.selectedIndex=0">
<form action="#" name="myForm">

<select name ="regions" onchange="populateCity(this,'city')">
<option value = ""> Region </option>
<option value="0"> United States </option>
<option value="1"> Canada </option>
</select>

<br>


<select name="city">
<option>City</option>
</select>

</form>


</html>

f16fan12
07-12-2006, 02:22 PM
That looks good, thanks.
I was wondering if there was a simpler way of doing it, because I don't understand most of the script you wrote vwphillips. I need to make this script a lot bigger to include more regions/cities, so I would like to be able to understand it.
Thanks a lot for answering.
Jesse

f16fan12
07-12-2006, 02:40 PM
Also, I was hoping to keep the brackets out of the array, because I'm going to need to move this script into a larger script and then take the numbered data in the arrays. I don't have the expertise in javascript to deal with that.

And I can't just keep posting my script here!

vwphillips
07-12-2006, 02:48 PM
dimensioned arrays are the easiest way of doing this
however only the first field is currently being used as I dont know what all the numbers are for.

also best that the arrays are generated by serverside code.
even better to do it all serverside.

the code is very standard and should be self explantary

typo corrected


function populateCity(obj,sel) {
var ary=SelAry[obj.selectedIndex]; // the selected index = the field of SelAry which contains the correct arry
var sel=obj.form[sel]; // identify the select list object
sel.options.length=1; // remove all otions except 0
for (var zxc0=0;zxc0<ary.length;zxc0++){ // cycle though the array
sel.options[zxc0+1]=new Option(ary[zxc0][0],zxc0,true,true); // make the options with value = the field number of the array, text as field 0 of the sub array
}
sel.selectedIndex=0; // select option 0 of the select list
}

f16fan12
07-12-2006, 03:06 PM
Yeah, I've managed to go through what you wrote and I guess I understand it. But there's no way I'd ever be able to write it.
If we kept "dimensioned arrays" out of this, could something like this work:



//more of this array, but just to show you they're not "dimensioned"
"Tallahassee, FL", 30, 26, 0, 84, 16, 0, 45.7, -5.0,
"Tampa, FL", 27, 56, 0, 82, 27, 0, 5.8, -5.0,
"Toledo, OH", 41, 39, 0, 83, 33, 0, 178.3, -5.0,
"Topeka, KS", 39, 2, 0, 95, 40, 0, 283.5, -6.0,
"Tulsa, OK", 36, 9, 0, 95, 59, 0, 245.1, -6.0,
"Washington, DC", 38, 53, 0, 77, 2, 0, 4.3, -5.0
)




function populateCity(obj) {


if (obj.selectedIndex=0)
{
var x
index = uscities[(x*9)]
for(x=0; x<720; x++)
{

city.options[index]=new Option(uscities[x][0])
}

else if (obj.selectedIndex=1)
{
var x
index = canadacities[(x*9)]
for(x=0; x<720; x++)
{

city.options[index]=new Option(canadacities[x][0])
}


}
}

It definitely doesn't work when I try it.
Thanks a lot.

f16fan12
07-12-2006, 04:50 PM
Or maybe something like this:



var SelAry=[uscities,canadacities]

function populateCity(obj,sel) {
var ary=SelAry[obj.selectedIndex];
var sel=obj.form[sel];
sel.options.length=1;
for (var x=0; x<ary.length;x+9){
sel.options[x+9]=new Option(ary[x][0])
}
sel.selectedIndex=0
}

f16fan12
07-12-2006, 07:20 PM
This is probably better, but it still won't work.


var regionslist=document.myForm.regions
var citieslist=document.myForm.city



function populateCity(selectedregion){
citieslist.options.length=0
if(selectedregion=1){

for(x=0;x<uscities.length;x++) {
choice = uscities[9*x]
citieslist.options[citieslist.options.length]=new Option (uscities[choice])
}
}
}

Thanks for any replies at all.

vwphillips
07-12-2006, 08:05 PM
The use of dimensioned arrays simplifys many tasks and is worth the effort to understand and use.

artman 186
07-12-2006, 08:23 PM
The coding differences between the two are very trivial. Here's the version without dimensional arrays:


<html>
<script language="javascript">

canadacities = new Array (
"Alert, NU", 82, 31, 0, 62, 20, 0, 29.0, -4.0,
"Calgary, AB", 51, 3, 0, 114, 5, 0,1079.0, -7.0,
"Charlottetown, PE", 46, 14, 0, 63, 8, 0, 55.2, -4.0,
"Churchill, MB", 58, 46, 0, 94, 10, 0, 28.7, -6.0,
"Edmonton, AB", 53, 33, 0, 113, 28, 0, 676.4, -7.0,
"Fredericton, NB", 45, 58, 0, 66, 39, 0, 8.8, -4.0,
"Halifax, NS", 44, 39, 0, 63, 36, 0, 25.3, -4.0,
"Hamilton, ON", 43, 15, 0, 79, 51, 0, 100.3, -5.0,
"Inuvik, NT", 68, 25, 0, 133, 30, 0, 0.0, -7.0,
"Iqaluit, NU", 63, 44, 0, 68, 28, 0, 33.5, -5.0,
"Kuujjuaq, QC", 58, 6, 0, 68, 25, 0, 0.0, -5.0,
"Lethbridge, AB", 49, 42, 0, 112, 50, 0, 909.8, -7.0,
"London, ON", 42, 59, 0, 81, 14, 0, 250.5, -5.0,
"Montreal, QC", 45, 31, 0, 73, 34, 0, 57.0, -5.0,
"Ottawa, ON", 45, 25, 0, 75, 42, 0, 114.0, -5.0,
"Prince George, BC", 53, 55, 0, 122, 45, 0, 676.0, -8.0,
"Quebec, QC", 46, 49, 0, 71, 14, 0, 72.8, -5.0,
"Regina, SK", 50, 25, 0, 104, 39, 0, 574.2, -6.0,
"Resolute, NU", 74, 41, 0, 94, 54, 0, 67.1, -6.0,
"Saint John's, NF", 47, 34, 0, 52, 43, 0, 64.3, -3.5,
"Saskatoon, SK", 52, 7, 0, 106, 38, 0, 515.1, -6.0,
"Sault Sainte Marie, ON", 46, 31, 0, 84, 20, 0, 179.5, -5.0,
"Thunder Bay, ON", 48, 23, 0, 89, 15, 0, 187.8, -5.0,
"Toronto, ON", 43, 39, 0, 79, 23, 0, 115.5, -5.0,
"Vancouver, BC", 49, 16, 0, 123, 7, 0, 38.7, -8.0,
"Victoria, BC", 48, 25, 0, 123, 22, 0, 17.4, -5.0,
"Whitehorse, YT", 60, 43, 0, 135, 3, 0, 702.0, -8.0,
"Winnipeg, MB", 49, 53, 0, 97, 9, 0, 238.7, -6.0,
"Windsor, ON", 42, 18, 0, 83, 1, 0, 183.8, -5.0,
"Yellowknife, NT", 62, 27, 0, 114, 21, 0, 205.4, -7.0
)

uscities = new Array(
"Akron, OH", 41, 5, 0, 81, 30, 0, 266.4, -5.0,
"Albany, NY", 42, 39, 0, 73, 45, 0, 83.8, -5.0,
"Allentown, PA", 40, 35, 0, 75, 30, 0, 77.7, -5.0,
"Atlanta, GA", 33, 44, 0, 84, 23, 0, 307.8, -5.0,
"Austin, TX", 30, 16, 0, 97, 44, 0, 182.0, -6.0,
"Baltimore, MD", 39, 17, 0, 76, 36, 0, 45.1, -5.0,
"Baton Rouge, LA", 30, 27, 0, 91, 9, 0, 17.4, -6.0,
"Birmingham, AL", 33, 31, 0, 86, 48, 0, 189.0, -6.0,
"Boise, ID", 43, 36, 0, 116, 12, 0, 865.0, -7.0,
"Boston, MA", 42, 21, 0, 71, 3, 0, 4.6, -5.0,
"Buffalo, NY", 42, 53, 0, 78, 52, 0, 214.9, -5.0,
"Charleston, WV", 38, 20, 0, 81, 37, 0, 286.2, -5.0,
"Chicago, IL", 41, 51, 0, 87, 39, 0, 185.0, -6.0,
"Cincinnati, OH", 39, 9, 0, 84, 27, 0, 264.9, -5.0,
"Cleveland, OH", 41, 29, 0, 81, 41, 0, 236.8, -5.0,
"Columbia, SC", 34, 0, 0, 81, 2, 0, 57.9, -5.0,
"Columbus, OH", 39, 57, 0, 82, 59, 0, 247.5, -5.0,
"Dallas, TX", 32, 46, 0, 96, 47, 0, 167.9, -6.0,
"Dayton, OH", 39, 45, 0, 84, 15, 0, 175.0, -5.0,
"Denver, CO", 39, 44, 0, 104, 59, 0,1610.3, -7.0,
"Des Moines, IA", 41, 36, 0, 93, 36, 0, 285.9, -6.0,
"Detroit, MI", 42, 20, 0, 83, 3, 0, 192.9, -5.0,
"El Paso, TX", 31, 45, 0, 106, 29, 0,1194.2, -7.0,
"Flint, MI", 43, 1, 0, 83, 41, 0, 228.6, -5.0,
"Grand Rapids, MI", 42, 58, 0, 85, 40, 0, 239.0, -5.0,
"Harrisburg, PA", 40, 16, 0, 76, 53, 0, 111.3, -5.0,
"Hartford, CT", 41, 46, 0, 72, 41, 0, 51.5, -5.0,
"Honolulu, HI", 21, 18, 0, 157, 51, 0, 2.1, -10.0,
"Houston, TX", 29, 45, 0, 95, 21, 0, 29.3, -6.0,
"Indianapolis, IN", 39, 46, 0, 86, 9, 0, 241.4, -5.0,
"Jackson, MS", 32, 17, 0, 90, 11, 0, 88.7, -6.0,
"Jacksonville, FL", 30, 19, 0, 81, 39, 0, 6.1, -5.0,
"Kansas City, MO", 39, 5, 0, 94, 34, 0, 226.2, -6.0,
"Lansing, MI", 42, 43, 0, 84, 33, 0, 253.0, -5.0,
"Lincoln, NE", 40, 48, 0, 96, 40, 0, 350.5, -6.0,
"Little Rock, AR", 34, 44, 0, 92, 17, 0, 78.3, -6.0,
"Los Angeles, CA", 34, 3, 0, 118, 14, 0, 29.6, -8.0,
"Louisville, KY", 38, 15, 0, 85, 45, 0, 145.4, -5.0,
"Madison, WI", 43, 4, 0, 89, 24, 0, 262.1, -6.0,
"Memphis, TN", 35, 8, 0, 90, 2, 0, 78.6, -6.0,
"Miami, FL", 25, 46, 0, 80, 11, 0, 2.1, -5.0,
"Milwaukee, WI", 43, 2, 0, 87, 54, 0, 204.8, -6.0,
"Minneapolis, MN", 44, 58, 0, 93, 15, 0, 254.2, -6.0,
"Montgomery, AL", 32, 23, 0, 86, 18, 0, 48.8, -6.0,
"Nashville, TN", 36, 9, 0, 86, 47, 0, 179.8, -6.0,
"New Haven, CT", 41, 18, 0, 72, 56, 0, 12.2, -5.0,
"New Orleans, LA", 29, 57, 0, 90, 4, 0, 0.9, -6.0,
"New York, NY", 40, 43, 0, 74, 1, 0, 40.2, -5.0,
"Norfolk, VA", 36, 50, 0, 76, 17, 0, 3.0, -5.0,
"Oklahoma City, OK", 35, 28, 0, 97, 30, 0, 391.7, -6.0,
"Omaha, NE", 41, 15, 0, 95, 56, 0, 303.9, -6.0,
"Orlando, FL", 28, 32, 0, 81, 22, 0, 21.3, -5.0,
"Philadelphia, PA", 39, 57, 0, 75, 9, 0, 1.5, -5.0,
"Phoenix, AZ", 33, 26, 0, 112, 4, 0, 340.5, -7.0,
"Pittsburgh, PA", 40, 26, 0, 79, 59, 0, 227.7, -5.0,
"Portland, OR", 45, 31, 0, 122, 40, 0, 6.4, -8.0,
"Providence, RI", 41, 49, 0, 71, 24, 0, 15.5, -5.0,
"Raleigh, NC", 35, 46, 0, 78, 38, 0, 132.3, -5.0,
"Richmond, VA", 37, 33, 0, 77, 27, 0, 50.0, -5.0,
"Riverside, CA", 33, 57, 0, 117, 23, 0, 0.0, -8.0,
"Rochester, NY", 43, 9, 0, 77, 36, 0, 166.7, -5.0,
"Sacramento, CA", 38, 34, 0, 121, 29, 0, 9.1, -8.0,
"St. Paul, MN", 44, 57, 0, 93, 5, 0, 237.7, -6.0,
"St. Louis, MO", 38, 37, 0, 90, 11, 0, 163.1, -6.0,
"St. Petersburg, FL", 27, 46, 0, 82, 40, 0, 6.1, -5.0,
"Salem, OR", 44, 56, 0, 123, 2, 0, 47.2, -8.0,
"Salt Lake City, UT", 40, 45, 0, 111, 53, 0,1286.3, -7.0,
"San Antonio, TX", 29, 25, 0, 98, 29, 0, 240.2, -6.0,
"San Diego, CA", 32, 42, 0, 117, 9, 0, 4.0, -8.0,
"San Francisco, CA", 37, 46, 0, 122, 25, 0, 2.4, -8.0,
"San Jose, CA", 37, 20, 0, 121, 53, 0, 27.4, -8.0,
"Seattle, WA", 47, 36, 0, 122, 19, 0, 121.9, -8.0,
"Springfield, IL", 39, 48, 0, 89, 38, 0, 185.9, -6.0,
"Syracuse, NY", 43, 2, 0, 76, 8, 0, 125.0, -5.0,
"Tallahassee, FL", 30, 26, 0, 84, 16, 0, 45.7, -5.0,
"Tampa, FL", 27, 56, 0, 82, 27, 0, 5.8, -5.0,
"Toledo, OH", 41, 39, 0, 83, 33, 0, 178.3, -5.0,
"Topeka, KS", 39, 2, 0, 95, 40, 0, 283.5, -6.0,
"Tulsa, OK", 36, 9, 0, 95, 59, 0, 245.1, -6.0,
"Washington, DC", 38, 53, 0, 77, 2, 0, 4.3, -5.0
)




function populateCity() {
var selectedregion = document.getElementById("regions").value;
var cityArray = uscities;
if (selectedregion == 1) {
cityArray = canadacities;
}
var citieslist = document.getElementById("city")
citieslist.options.length = 0;
for(x = 0; x < cityArray.length / 9; x++) {
choice = cityArray[9*x];
var option = document.createElement("option");
citieslist.options.add(option);
option.value = choice;
option.innerHTML = choice;

}

}

</script>
<body onload="document.myForm.regions.selectedIndex=0">
<form action="#" name="myForm">

<select name ="regions" onchange="populateCity()">
<option value = ""> Region </option>
<option value="0"> United States </option>
<option value="1"> Canada </option>
</select>

<br>


<select id="city">
<option>City</option>
</select>

</form>


</html>


Here's the difference with dimensional arrays (changes in red):



<html>
<script language="javascript">

canadacities = new Array (
["Alert, NU", 82, 31, 0, 62, 20, 0, 29.0, -4.0],
["Calgary, AB", 51, 3, 0, 114, 5, 0,1079.0, -7.0],
["Charlottetown, PE", 46, 14, 0, 63, 8, 0, 55.2, -4.0],
["Churchill, MB", 58, 46, 0, 94, 10, 0, 28.7, -6.0],
["Edmonton, AB", 53, 33, 0, 113, 28, 0, 676.4, -7.0],
["Fredericton, NB", 45, 58, 0, 66, 39, 0, 8.8, -4.0],
["Halifax, NS", 44, 39, 0, 63, 36, 0, 25.3, -4.0],
["Hamilton, ON", 43, 15, 0, 79, 51, 0, 100.3, -5.0],
["Inuvik, NT", 68, 25, 0, 133, 30, 0, 0.0, -7.0],
["Iqaluit, NU", 63, 44, 0, 68, 28, 0, 33.5, -5.0],
["Kuujjuaq, QC", 58, 6, 0, 68, 25, 0, 0.0, -5.0],
["Lethbridge, AB", 49, 42, 0, 112, 50, 0, 909.8, -7.0],
["London, ON", 42, 59, 0, 81, 14, 0, 250.5, -5.0],
["Montreal, QC", 45, 31, 0, 73, 34, 0, 57.0, -5.0],
["Ottawa, ON", 45, 25, 0, 75, 42, 0, 114.0, -5.0],
["Prince George, BC", 53, 55, 0, 122, 45, 0, 676.0, -8.0],
["Quebec, QC", 46, 49, 0, 71, 14, 0, 72.8, -5.0],
["Regina, SK", 50, 25, 0, 104, 39, 0, 574.2, -6.0],
["Resolute, NU", 74, 41, 0, 94, 54, 0, 67.1, -6.0],
["Saint John's, NF", 47, 34, 0, 52, 43, 0, 64.3, -3.5],
["Saskatoon, SK", 52, 7, 0, 106, 38, 0, 515.1, -6.0],
["Sault Sainte Marie, ON", 46, 31, 0, 84, 20, 0, 179.5, -5.0],
["Thunder Bay, ON", 48, 23, 0, 89, 15, 0, 187.8, -5.0],
["Toronto, ON", 43, 39, 0, 79, 23, 0, 115.5, -5.0],
["Vancouver, BC", 49, 16, 0, 123, 7, 0, 38.7, -8.0],
["Victoria, BC", 48, 25, 0, 123, 22, 0, 17.4, -5.0],
["Whitehorse, YT", 60, 43, 0, 135, 3, 0, 702.0, -8.0],
["Winnipeg, MB", 49, 53, 0, 97, 9, 0, 238.7, -6.0],
["Windsor, ON", 42, 18, 0, 83, 1, 0, 183.8, -5.0],
["Yellowknife, NT", 62, 27, 0, 114, 21, 0, 205.4, -7.0]
)

uscities = new Array (
["Akron, OH", 41, 5, 0, 81, 30, 0, 266.4, -5.0],
["Albany, NY", 42, 39, 0, 73, 45, 0, 83.8, -5.0],
["Allentown, PA", 40, 35, 0, 75, 30, 0, 77.7, -5.0],
["Atlanta, GA", 33, 44, 0, 84, 23, 0, 307.8, -5.0],
["Austin, TX", 30, 16, 0, 97, 44, 0, 182.0, -6.0],
["Baltimore, MD", 39, 17, 0, 76, 36, 0, 45.1, -5.0],
["Baton Rouge, LA", 30, 27, 0, 91, 9, 0, 17.4, -6.0],
["Birmingham, AL", 33, 31, 0, 86, 48, 0, 189.0, -6.0],
["Boise, ID", 43, 36, 0, 116, 12, 0, 865.0, -7.0],
["Boston, MA", 42, 21, 0, 71, 3, 0, 4.6, -5.0],
["Buffalo, NY", 42, 53, 0, 78, 52, 0, 214.9, -5.0],
["Charleston, WV", 38, 20, 0, 81, 37, 0, 286.2, -5.0],
["Chicago, IL", 41, 51, 0, 87, 39, 0, 185.0, -6.0],
["Cincinnati, OH", 39, 9, 0, 84, 27, 0, 264.9, -5.0],
["Cleveland, OH", 41, 29, 0, 81, 41, 0, 236.8, -5.0],
["Columbia, SC", 34, 0, 0, 81, 2, 0, 57.9, -5.0],
["Columbus, OH", 39, 57, 0, 82, 59, 0, 247.5, -5.0],
["Dallas, TX", 32, 46, 0, 96, 47, 0, 167.9, -6.0],
["Dayton, OH", 39, 45, 0, 84, 15, 0, 175.0, -5.0],
["Denver, CO", 39, 44, 0, 104, 59, 0,1610.3, -7.0],
["Des Moines, IA", 41, 36, 0, 93, 36, 0, 285.9, -6.0],
["Detroit, MI", 42, 20, 0, 83, 3, 0, 192.9, -5.0],
["El Paso, TX", 31, 45, 0, 106, 29, 0,1194.2, -7.0],
["Flint, MI", 43, 1, 0, 83, 41, 0, 228.6, -5.0],
["Grand Rapids, MI", 42, 58, 0, 85, 40, 0, 239.0, -5.0],
["Harrisburg, PA", 40, 16, 0, 76, 53, 0, 111.3, -5.0],
["Hartford, CT", 41, 46, 0, 72, 41, 0, 51.5, -5.0],
["Honolulu, HI", 21, 18, 0, 157, 51, 0, 2.1, -10.0],
["Houston, TX", 29, 45, 0, 95, 21, 0, 29.3, -6.0],
["Indianapolis, IN", 39, 46, 0, 86, 9, 0, 241.4, -5.0],
["Jackson, MS", 32, 17, 0, 90, 11, 0, 88.7, -6.0],
["Jacksonville, FL", 30, 19, 0, 81, 39, 0, 6.1, -5.0],
["Kansas City, MO", 39, 5, 0, 94, 34, 0, 226.2, -6.0],
["Lansing, MI", 42, 43, 0, 84, 33, 0, 253.0, -5.0],
["Lincoln, NE", 40, 48, 0, 96, 40, 0, 350.5, -6.0],
["Little Rock, AR", 34, 44, 0, 92, 17, 0, 78.3, -6.0],
["Los Angeles, CA", 34, 3, 0, 118, 14, 0, 29.6, -8.0],
["Louisville, KY", 38, 15, 0, 85, 45, 0, 145.4, -5.0],
["Madison, WI", 43, 4, 0, 89, 24, 0, 262.1, -6.0],
["Memphis, TN", 35, 8, 0, 90, 2, 0, 78.6, -6.0],
["Miami, FL", 25, 46, 0, 80, 11, 0, 2.1, -5.0],
["Milwaukee, WI", 43, 2, 0, 87, 54, 0, 204.8, -6.0],
["Minneapolis, MN", 44, 58, 0, 93, 15, 0, 254.2, -6.0],
["Montgomery, AL", 32, 23, 0, 86, 18, 0, 48.8, -6.0],
["Nashville, TN", 36, 9, 0, 86, 47, 0, 179.8, -6.0],
["New Haven, CT", 41, 18, 0, 72, 56, 0, 12.2, -5.0],
["New Orleans, LA", 29, 57, 0, 90, 4, 0, 0.9, -6.0],
["New York, NY", 40, 43, 0, 74, 1, 0, 40.2, -5.0],
["Norfolk, VA", 36, 50, 0, 76, 17, 0, 3.0, -5.0],
["Oklahoma City, OK", 35, 28, 0, 97, 30, 0, 391.7, -6.0],
["Omaha, NE", 41, 15, 0, 95, 56, 0, 303.9, -6.0],
["Orlando, FL", 28, 32, 0, 81, 22, 0, 21.3, -5.0],
["Philadelphia, PA", 39, 57, 0, 75, 9, 0, 1.5, -5.0],
["Phoenix, AZ", 33, 26, 0, 112, 4, 0, 340.5, -7.0],
["Pittsburgh, PA", 40, 26, 0, 79, 59, 0, 227.7, -5.0],
["Portland, OR", 45, 31, 0, 122, 40, 0, 6.4, -8.0],
["Providence, RI", 41, 49, 0, 71, 24, 0, 15.5, -5.0],
["Raleigh, NC", 35, 46, 0, 78, 38, 0, 132.3, -5.0],
["Richmond, VA", 37, 33, 0, 77, 27, 0, 50.0, -5.0],
["Riverside, CA", 33, 57, 0, 117, 23, 0, 0.0, -8.0],
["Rochester, NY", 43, 9, 0, 77, 36, 0, 166.7, -5.0],
["Sacramento, CA", 38, 34, 0, 121, 29, 0, 9.1, -8.0],
["St. Paul, MN", 44, 57, 0, 93, 5, 0, 237.7, -6.0],
["St. Louis, MO", 38, 37, 0, 90, 11, 0, 163.1, -6.0],
["St. Petersburg, FL", 27, 46, 0, 82, 40, 0, 6.1, -5.0],
["Salem, OR", 44, 56, 0, 123, 2, 0, 47.2, -8.0],
["Salt Lake City, UT", 40, 45, 0, 111, 53, 0,1286.3, -7.0],
["San Antonio, TX", 29, 25, 0, 98, 29, 0, 240.2, -6.0],
["San Diego, CA", 32, 42, 0, 117, 9, 0, 4.0, -8.0],
["San Francisco, CA", 37, 46, 0, 122, 25, 0, 2.4, -8.0],
["San Jose, CA", 37, 20, 0, 121, 53, 0, 27.4, -8.0],
["Seattle, WA", 47, 36, 0, 122, 19, 0, 121.9, -8.0],
["Springfield, IL", 39, 48, 0, 89, 38, 0, 185.9, -6.0],
["Syracuse, NY", 43, 2, 0, 76, 8, 0, 125.0, -5.0],
["Tallahassee, FL", 30, 26, 0, 84, 16, 0, 45.7, -5.0],
["Tampa, FL", 27, 56, 0, 82, 27, 0, 5.8, -5.0],
["Toledo, OH", 41, 39, 0, 83, 33, 0, 178.3, -5.0],
["Topeka, KS", 39, 2, 0, 95, 40, 0, 283.5, -6.0],
["Tulsa, OK", 36, 9, 0, 95, 59, 0, 245.1, -6.0],
["Washington, DC", 38, 53, 0, 77, 2, 0, 4.3, -5.0])




function populateCity() {
var selectedregion = document.getElementById("regions").value;
var cityArray = uscities;
if (selectedregion == 1) {
cityArray = canadacities;
}
var citieslist = document.getElementById("city")
citieslist.options.length = 0;
for(x = 0; x < cityArray.length; x++) {
choice = cityArray[x][0];
var option = document.createElement("option");
citieslist.options.add(option);
option.value = choice;
option.innerHTML = choice;

}

}

</script>
<body onload="document.myForm.regions.selectedIndex=0">
<form action="#" name="myForm">

<select name ="regions" onchange="populateCity()">
<option value = ""> Region </option>
<option value="0"> United States </option>
<option value="1"> Canada </option>
</select>

<br>


<select id="city">
<option>City</option>
</select>

</form>


</html>

f16fan12
07-12-2006, 09:41 PM
Thanks you very very much artman186.
Can I ask you, or anyone else for that matter, a couple questions on your code...
1. What is the innerHTML doing? What is that anyway? I looked it up in http://developer.mozilla.org/en/docs/DOM:element.innerHTML but I still don't really understand it.

2. In this line:
citieslist.options.add(option); does the option refer to the creation of a new Option in the menu, or is it adding the variable "option?"


I don't really understand the getElementbyId, and especially what it's doing the second time (i.e. var citieslist = document.getElementById("city") )

Also, is there a way to make this work in Netscape and Firefox?

I really appreciate you putting the time into this, even if it only takes you a second.
Jesse

Pyth007
07-12-2006, 10:42 PM
[Multiple] dimensional arrays, as vwphillips said, are indeed much easier to use, once you figure out how to use them (see artman's comparison to see how the for-loop becomes simplified when using multi-D arrays)...

Basically, dimensional arrays can be thought of as being a list of lists. In your case, you are working with 2 lists (hence you should use a 2-D array): the first is a list of cities and their data, the second is a list of data for each city. So canadacities array would basically look like:
canadacities = new Array (city_0, city_1, city_2, city_3, ... , city_n)
And each element / city in the canadacities array would be another array:
city_0 = new Array ("Alert, NU", 82, 31, 0, 62, 20, 0, 29.0, -4.0)

Arrays can also be defined without the "new Array()" format using square brackets. Thus the city_0 array could be written:
city_0 = ["Alert, NU", 82, 31, 0, 62, 20, 0, 29.0, -4.0]

And to shorten it up even more, you can make the "city_x" arrays anonymously while defining the canadacities array using that bracket notation:


canadacities = new Array(
["Alert, NU", 82, 31, 0, 62, 20, 0, 29.0, -4.0], // city_0
["Calgary, AB", 51, 3, 0, 114, 5, 0,1079.0, -7.0], // city_1
/* ... stuff for city_2, etc... */,
)


In each case, the item in the list is obtained using square-brackets and the number of the position inside the list, starting with 0. Thus canadacities[3] retrieves the "city_3" array with the info. for "Churchill, MB" while canadacities[3][0] get the name "Churchill, MB", and canadacities[3][4] gets the number '94' out of the list for Churchill.

To really get "fancy" (as well as to make your code even more readable albiet more complex), you could use associative arrays which use words instead of numbers to access each item in an array. Thus you'd be able to write something like:


alert(canadacities['churchill']['name']+" has "+canadacities['churchill']['population']+" people living in it.");
// Output: "Churchill, MB has 963 people living in it."

(population from 2001 census (http://www12.statcan.ca/english/census01/products/standard/popdwell/Table-CSD-N.cfm?T=1&SR=836&SRCH=1))
However, associative arrays are not actually Arrays, but are in fact objects. Thus you would define them as (using curly braces):


// object = { key : value}
canadacities = {
'alert' : {'name' : 'Alert, NU', 'num1' : 82, ... , 'num8' : -4.0},
'calgary' : {'name' : 'Calgary, AB' ...},
...
}

// You could also make the objects to use dot notation...
// canadacities = { alert : { name : 'Alert, NU' ...} ... }
// So you could then call:
// alert(canadacities.churchill.name+" has "+canadacities.churchill.population+" people living in it.");

Furthermore, being that they are objects instead of arrays prevents the use of array methods and properties (eg the length property does not exist in objects, so you'd have to use a for-in loop to go thru the list)

Pyth007
07-12-2006, 11:23 PM
You asked your question while I was typing in the previous response, hence the double post...

Since it makes more sense to do so (in my answer) I'll tackle your questions in reverse order...

The code given should work in all modern browsers. This is because it uses the W3C recommended standard for the document object model (or DOM). Here's (http://www.quirksmode.org/dom/) a great reference for getting your feet wet with the DOM. The DOM is used to make the code more standard for any browser following the W3C's guidlines (like FF or Netscape).

One of the first methods that beginning DOM coders use is getElementById(). It basically goes thru the HTML and "grabs" the element that has the specified id. In the given code, the call was getElementById('city') and looking thru the HTML code, you find that the second <select> element has the id='city'. Since the variable citieslist was set = getElementById('city'), citieslist now points to the <select> element. So when citieslist.options.add(option) is called, a new item (held in the 'option' variable) is added as one of the options for the <select> element.

Now to figure out what you are adding... :D
Notice the second line in the for-loop is assigning the variable 'option' the result of the createElement() method. createElement() is another DOM method; in this case, instead of getting an element, it actually creates a new element of the specified type. So (note that choice is given the name of the city each iteration thru the for-loop):


javascript | What it means in HTML
----------------------------------------------------------------
createElement('option') | Makes <option></option>
option.value=choice | <option value=choice></option>
option.innerHTML=choice | <option value=choice>choice</option>

In the last step, the choice name is inserted between the <option></option> tags using the innerHTML (get it? The HTML in the <option></option> tags! ) Note however that the createElement() method does not in fact put anything onto the HTML document itself; it just creates this phantom <option> element that is just hanging out in cyberspace. Hence the reason to add(option) to the <select> element that is a part of the actual HTML. As you go thru more javascript code, you may also see the parentElement.appendChild(newElement) method to attach / append elements that you created with createElement() to the actual HTML document.

f16fan12
07-13-2006, 04:51 PM
Ok, I just wrote this very long post and it was all erased. So I'm making a shorter version:

First, I really appreciate your last two posts Pyth007. They helped me immensely to understand this script and I also now realize the benefits and usefulness of multi-dimensional arrays. But at least for now I would like to keep my arrays one dimensional, for the sake of simplicity in the larger program I am modifying.

But then again, I may end up changing it to multi-dimensional arrays later because...

...I'm still having browser troubles:
Mac OS 9.2.2, 1 GB RAM:
For Mozilla 1.3.1, Internet Explorer 5.1, and Netscape Communicator 4.75, it does not work. I select Canada or USA but the city menu does not change.
Only in Mozilla is there a Javascript console, and the message there says: "Error: document.getElementById("regions") has no properties"

with a PC (XP Pro. Service pack 2, 1 GB RAM, 3.2ghz processor)
Internet Explorer 6 - works fine
Mozilla 1.5.0.4 - does not work, same message in javascript console.

The version with multi-dimensional arrays also does not work (it's not like it's so different anyway).

What can I do? It would be very good for me to be able to use this and test it on the Mac, because that's where I'm doing all my work.
Thanks again for your excellent replies. It's nice to come to a forum like this and get my questions answered.

Jesse

f16fan12
07-13-2006, 05:10 PM
Well what'd ya know...I managed to make something work on my own.
I made
var selectedregion = document.myForm.regions.selectedIndex

and that did the trick.

I do still wonder why the getElementById didn't work for regions, but did work for city.
Oh bugger!!
Is it because it should be <select id = "regions"...>, rather than <select name...>? YES it is!
Man, I wish I had caught that an hour ago.
Interesting that it's able to work with <select name> and getElementById in IE 6.0 though.
Thanks for your help again.

Pyth007
07-13-2006, 05:47 PM
One of the problems with IE's implementation of the DOM... Only in IE can the name attribute be used in place of an id.

See, the problem is that the id attribute must be unique whereas the name attribute can be the same for several elements (ie this is how radio buttons can be used as a group; give each the same name). Thus if you use getElementById() and supply a name, there is no way to determine which element the script is refering to. So proper implementation would require that this method only use the id attribute.

Incidently, there is also another DOM method getElementsByName() which gets a collection of all elements with the same name (notice the plural spelling of Elements in the method name!). So you could have alternatively used document.getElementsByName('region')[0] to get at the select-element without making an id for it. However common practice is to give elements an id attribute to gain acces to the element from within the js (and in some browsers there's a slight performance boost to using id's instead on names).

Also note that if a form is to be posted (ie <form action="POST"> ) the elements within the form (eg <select>, <input>, etc.) need to have a name attribute in order for their values to be posted to the resulting page. Thus you may need to include both a name and an id to each element (these values can be the same by the way). Remember that the id's need to be unique, so if you do have several elements with the same name (as would be necessary for radio buttons), I'd make the id the same as the name and attach a number to the end (eg "radioButton1", "radioButton2", etc.)

f16fan12
07-13-2006, 07:07 PM
Ok Pyth007, I'm not sure if this is like what you wrote in the last post, but now I have a little problem, and it might be at least related. I'm putting this into a larger part of the big script that I'm working on and need to be able to read which city exactly the person picked, and then be able to find that city in the correct array and use the data that comes after that. Here's the code that I'm working on:



<html>
<head>
<script language="JavaScript">



canadacities = new Array (
"Alert, NU", 82, 31, 0, 62, 20, 0, 29.0, -4.0,
"Calgary, AB", 51, 3, 0, 114, 5, 0,1079.0, -7.0,
"Charlottetown, PE", 46, 14, 0, 63, 8, 0, 55.2, -4.0,
"Churchill, MB", 58, 46, 0, 94, 10, 0, 28.7, -6.0,
"Edmonton, AB", 53, 33, 0, 113, 28, 0, 676.4, -7.0,
"Fredericton, NB", 45, 58, 0, 66, 39, 0, 8.8, -4.0,
"Halifax, NS", 44, 39, 0, 63, 36, 0, 25.3, -4.0,
"Hamilton, ON", 43, 15, 0, 79, 51, 0, 100.3, -5.0,
"Inuvik, NT", 68, 25, 0, 133, 30, 0, 0.0, -7.0,
"Iqaluit, NU", 63, 44, 0, 68, 28, 0, 33.5, -5.0,
"Kuujjuaq, QC", 58, 6, 0, 68, 25, 0, 0.0, -5.0,
"Lethbridge, AB", 49, 42, 0, 112, 50, 0, 909.8, -7.0,
"London, ON", 42, 59, 0, 81, 14, 0, 250.5, -5.0,
"Montreal, QC", 45, 31, 0, 73, 34, 0, 57.0, -5.0,
"Ottawa, ON", 45, 25, 0, 75, 42, 0, 114.0, -5.0,
"Prince George, BC", 53, 55, 0, 122, 45, 0, 676.0, -8.0,
"Quebec, QC", 46, 49, 0, 71, 14, 0, 72.8, -5.0,
"Regina, SK", 50, 25, 0, 104, 39, 0, 574.2, -6.0,
"Resolute, NU", 74, 41, 0, 94, 54, 0, 67.1, -6.0,
"Saint John's, NF", 47, 34, 0, 52, 43, 0, 64.3, -3.5,
"Saskatoon, SK", 52, 7, 0, 106, 38, 0, 515.1, -6.0,
"Sault Sainte Marie, ON", 46, 31, 0, 84, 20, 0, 179.5, -5.0,
"Thunder Bay, ON", 48, 23, 0, 89, 15, 0, 187.8, -5.0,
"Toronto, ON", 43, 39, 0, 79, 23, 0, 115.5, -5.0,
"Vancouver, BC", 49, 16, 0, 123, 7, 0, 38.7, -8.0,
"Victoria, BC", 48, 25, 0, 123, 22, 0, 17.4, -5.0,
"Whitehorse, YT", 60, 43, 0, 135, 3, 0, 702.0, -8.0,
"Winnipeg, MB", 49, 53, 0, 97, 9, 0, 238.7, -6.0,
"Windsor, ON", 42, 18, 0, 83, 1, 0, 183.8, -5.0,
"Yellowknife, NT", 62, 27, 0, 114, 21, 0, 205.4, -7.0
)

uscities = new Array(
"Akron, OH", 41, 5, 0, 81, 30, 0, 266.4, -5.0,
"Albany, NY", 42, 39, 0, 73, 45, 0, 83.8, -5.0,
"Allentown, PA", 40, 35, 0, 75, 30, 0, 77.7, -5.0,
"Atlanta, GA", 33, 44, 0, 84, 23, 0, 307.8, -5.0,
"Austin, TX", 30, 16, 0, 97, 44, 0, 182.0, -6.0,
"Baltimore, MD", 39, 17, 0, 76, 36, 0, 45.1, -5.0,
"Baton Rouge, LA", 30, 27, 0, 91, 9, 0, 17.4, -6.0,
"Birmingham, AL", 33, 31, 0, 86, 48, 0, 189.0, -6.0,
"Boise, ID", 43, 36, 0, 116, 12, 0, 865.0, -7.0,
"Boston, MA", 42, 21, 0, 71, 3, 0, 4.6, -5.0,
"Buffalo, NY", 42, 53, 0, 78, 52, 0, 214.9, -5.0,
"Charleston, WV", 38, 20, 0, 81, 37, 0, 286.2, -5.0,
"Chicago, IL", 41, 51, 0, 87, 39, 0, 185.0, -6.0,
"Cincinnati, OH", 39, 9, 0, 84, 27, 0, 264.9, -5.0,
"Cleveland, OH", 41, 29, 0, 81, 41, 0, 236.8, -5.0,
"Columbia, SC", 34, 0, 0, 81, 2, 0, 57.9, -5.0,
"Columbus, OH", 39, 57, 0, 82, 59, 0, 247.5, -5.0,
"Dallas, TX", 32, 46, 0, 96, 47, 0, 167.9, -6.0,
"Dayton, OH", 39, 45, 0, 84, 15, 0, 175.0, -5.0,
"Denver, CO", 39, 44, 0, 104, 59, 0,1610.3, -7.0,
"Des Moines, IA", 41, 36, 0, 93, 36, 0, 285.9, -6.0,
"Detroit, MI", 42, 20, 0, 83, 3, 0, 192.9, -5.0,
"El Paso, TX", 31, 45, 0, 106, 29, 0,1194.2, -7.0,
"Flint, MI", 43, 1, 0, 83, 41, 0, 228.6, -5.0,
"Grand Rapids, MI", 42, 58, 0, 85, 40, 0, 239.0, -5.0,
"Harrisburg, PA", 40, 16, 0, 76, 53, 0, 111.3, -5.0,
"Hartford, CT", 41, 46, 0, 72, 41, 0, 51.5, -5.0,
"Honolulu, HI", 21, 18, 0, 157, 51, 0, 2.1, -10.0,
"Houston, TX", 29, 45, 0, 95, 21, 0, 29.3, -6.0,
"Indianapolis, IN", 39, 46, 0, 86, 9, 0, 241.4, -5.0,
"Jackson, MS", 32, 17, 0, 90, 11, 0, 88.7, -6.0,
"Jacksonville, FL", 30, 19, 0, 81, 39, 0, 6.1, -5.0,
"Kansas City, MO", 39, 5, 0, 94, 34, 0, 226.2, -6.0,
"Lansing, MI", 42, 43, 0, 84, 33, 0, 253.0, -5.0,
"Lincoln, NE", 40, 48, 0, 96, 40, 0, 350.5, -6.0,
"Little Rock, AR", 34, 44, 0, 92, 17, 0, 78.3, -6.0,
"Los Angeles, CA", 34, 3, 0, 118, 14, 0, 29.6, -8.0,
"Louisville, KY", 38, 15, 0, 85, 45, 0, 145.4, -5.0,
"Madison, WI", 43, 4, 0, 89, 24, 0, 262.1, -6.0,
"Memphis, TN", 35, 8, 0, 90, 2, 0, 78.6, -6.0,
"Miami, FL", 25, 46, 0, 80, 11, 0, 2.1, -5.0,
"Milwaukee, WI", 43, 2, 0, 87, 54, 0, 204.8, -6.0,
"Minneapolis, MN", 44, 58, 0, 93, 15, 0, 254.2, -6.0,
"Montgomery, AL", 32, 23, 0, 86, 18, 0, 48.8, -6.0,
"Nashville, TN", 36, 9, 0, 86, 47, 0, 179.8, -6.0,
"New Haven, CT", 41, 18, 0, 72, 56, 0, 12.2, -5.0,
"New Orleans, LA", 29, 57, 0, 90, 4, 0, 0.9, -6.0,
"New York, NY", 40, 43, 0, 74, 1, 0, 40.2, -5.0,
"Norfolk, VA", 36, 50, 0, 76, 17, 0, 3.0, -5.0,
"Oklahoma City, OK", 35, 28, 0, 97, 30, 0, 391.7, -6.0,
"Omaha, NE", 41, 15, 0, 95, 56, 0, 303.9, -6.0,
"Orlando, FL", 28, 32, 0, 81, 22, 0, 21.3, -5.0,
"Philadelphia, PA", 39, 57, 0, 75, 9, 0, 1.5, -5.0,
"Phoenix, AZ", 33, 26, 0, 112, 4, 0, 340.5, -7.0,
"Pittsburgh, PA", 40, 26, 0, 79, 59, 0, 227.7, -5.0,
"Portland, OR", 45, 31, 0, 122, 40, 0, 6.4, -8.0,
"Providence, RI", 41, 49, 0, 71, 24, 0, 15.5, -5.0,
"Raleigh, NC", 35, 46, 0, 78, 38, 0, 132.3, -5.0,
"Richmond, VA", 37, 33, 0, 77, 27, 0, 50.0, -5.0,
"Riverside, CA", 33, 57, 0, 117, 23, 0, 0.0, -8.0,
"Rochester, NY", 43, 9, 0, 77, 36, 0, 166.7, -5.0,
"Sacramento, CA", 38, 34, 0, 121, 29, 0, 9.1, -8.0,
"St. Paul, MN", 44, 57, 0, 93, 5, 0, 237.7, -6.0,
"St. Louis, MO", 38, 37, 0, 90, 11, 0, 163.1, -6.0,
"St. Petersburg, FL", 27, 46, 0, 82, 40, 0, 6.1, -5.0,
"Salem, OR", 44, 56, 0, 123, 2, 0, 47.2, -8.0,
"Salt Lake City, UT", 40, 45, 0, 111, 53, 0,1286.3, -7.0,
"San Antonio, TX", 29, 25, 0, 98, 29, 0, 240.2, -6.0,
"San Diego, CA", 32, 42, 0, 117, 9, 0, 4.0, -8.0,
"San Francisco, CA", 37, 46, 0, 122, 25, 0, 2.4, -8.0,
"San Jose, CA", 37, 20, 0, 121, 53, 0, 27.4, -8.0,
"Seattle, WA", 47, 36, 0, 122, 19, 0, 121.9, -8.0,
"Springfield, IL", 39, 48, 0, 89, 38, 0, 185.9, -6.0,
"Syracuse, NY", 43, 2, 0, 76, 8, 0, 125.0, -5.0,
"Tallahassee, FL", 30, 26, 0, 84, 16, 0, 45.7, -5.0,
"Tampa, FL", 27, 56, 0, 82, 27, 0, 5.8, -5.0,
"Toledo, OH", 41, 39, 0, 83, 33, 0, 178.3, -5.0,
"Topeka, KS", 39, 2, 0, 95, 40, 0, 283.5, -6.0,
"Tulsa, OK", 36, 9, 0, 95, 59, 0, 245.1, -6.0,
"Washington, DC", 38, 53, 0, 77, 2, 0, 4.3, -5.0
)





function readform()
{
var cities = document.getElementById("regions")

if (cities == 0)
{ cities = uscities }
else if (cities == 1)
{cities = canadacities }

// Get the index for the selected city
specific = 9 * (parseInt(document.citiesform.city.options[document.citiesform.city.selectedIndex].value) - 1)



latd = cities[1 + specific]
latm = cities[2 + specific]
lats = cities[3 + specific]
lond = cities[4 + specific]
lonm = cities[5 + specific]
lons = cities[6 + specific]
alt = cities[7 + specific]
tzh = cities[8 + specific]
city = cities[specific]

// Putting time zone info into desired format

parseInt(tzh)

// tzx is the variable for East or West; a negative value is West

if (tzh<0)
{
document.citiesform.tzx.value = 1
}
else
{
document.citiesform.tzx.value = -1
}
tzh = Math.abs(tzh)


document.citiesform.latd.value = latd
document.citiesform.latm.value = latm
document.citiesform.lats.value = lats
document.citiesform.lond.value = lond
document.citiesform.lonm.value = lonm
document.citiesform.lons.value = lons
document.citiesform.alt.value = alt
document.citiesform.tzh.value = tzh
document.citiesform.city.value = city

}

function populateCity() {
var selectedregion = document.getElementById("regions")
var cityArray = uscities;
if (selectedregion == 1) {
cityArray = canadacities;
}
var citieslist = document.getElementById("city")
citieslist.options.length = 0;
for(x = 0; x < cityArray.length / 9; x++) {
choice = cityArray[9*x];
var option = document.createElement("option");
citieslist.options.add(option);
option.value = choice;
option.innerHTML = choice;

}

}


</script>
</head>
<body>

<form name="citiesform">
<div align="center">
<form action="#" name="citiesform">

<select id ="regions" onchange="populateCity()">
<option value = ""> Region </option>
<option value="0"> United States </option>
<option value="1"> Canada </option>
</select>

<select id="city" onchange="readform()">
<option>City</option>
</select>

<table border="0">


<tr>
<td align="right"> Latitude: </td>
<td colspan="7">
<input type="text" name="latd" size="3"> deg,
<input type="text" name="latm" size="3"> min
<input type="text" name="lats" size="3"> sec
</tr>
<tr>
<td align="right">Longitude: </td>
<td colspan="7">
<input type="text" size="3" name="lond"> deg,
<input type="text" size="3" name="lonm"> min
<input type="text" size="3" name="lons"> sec
</tr><tr>
<td align="right">Altitude: </td>
<td><input type="text" size="3" name="alt"> meters</td>
</tr>
<tr>
<td align="right">Time zone: </td>
<td colspan="7">
<select name="tzh" size="1" onchange="clearresults()">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>

<select name="tzm" size="1" onchange="clearresults()">
<option value="0">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
<select name="tzx" size="1" onchange="clearresults()">
<option value="-1">E</option>
<option value="1">W</option>
</select>
<select name="dst" size="1" onchange="clearresults()">
<option value="0">(Winter / regular time)</option>
<option value="1">(Daylight savings time)</option>
</select>
</td>
</tr>
<tr>
<td>City Name: </td>
<td><input type="text" size="11" name="city"></td>
</tr>

</table>


</form>



</html>


If you haven't grasped what the numbers mean by going through the code then I'll tell you that they're latitude and longitude coordinates, as well as altitude and time zone data for each city listed.

I guess my question is when a new option is created, is a value automatically assigned to it, and if so what is that value, or whether I can assign a value myself. It'd be good to have the first one's value as "1" so the math will work when finding the index as is. I'm thinking something having to do with the "option.value = choice;" line. But if I changed choice to give it a numerical value then wouldn't the innerHTML not display the city name?

Thanks for your continued help.

f16fan12
07-14-2006, 02:50 PM
Also, the script with just two menus (not the one in my previous post, but in the ones before that) works in all browsers except Safari on a very new Mac (OS X) Is there any way to get it to work in Safari? Does it support stuff like this?
Thanks.

f16fan12
07-14-2006, 03:54 PM
Would this work:


function populateCity() {
var selectedregion = document.getElementById("regions")
var cityArray = uscities;
if (selectedregion == 1) {
cityArray = canadacities;
}
var citieslist = document.getElementById("city")
citieslist.options.length = 0;
for(x = 0; x < cityArray.length / 9; x++) {
choice = cityArray[9*x];
citychoice = new Option();
citychoice.text = "choice"
citychoice.value = "x"
}

}

When I try that the second menu is not populated. I'm not really sure of how to define the Option parameters when they're variables.
Thanks for your help.

f16fan12
07-14-2006, 06:57 PM
Anyone? I just want to be able to assign values to the options, using the script written by artman. If you could just look at the script I posted and tell me what I'm doing wrong I'd really appreciate it.

f16fan12
07-17-2006, 02:20 PM
This must be a pretty tough question...even the masters here at CF can't answer it...
Finally found a question no one can answer...excellent.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum