Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with dynamic menus

    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:
    PHP Code:
    <html>
    <
    script language="javascript">

    canadacities = new Array (
    "Alert, NU",  82,  31,   0,  62,  20,   0,  29.0,  -4.0,
    "Calgary, AB",  51,   3,   0114,   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,   0113,  28,   0676.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,   0100.3,  -5.0,
    "Inuvik, NT",  68,  25,   0133,  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,   0112,  50,   0909.8,  -7.0,
    "London, ON",  42,  59,   0,  81,  14,   0250.5,  -5.0,
    "Montreal, QC",  45,  31,   0,  73,  34,   0,  57.0,  -5.0,
    "Ottawa, ON",  45,  25,   0,  75,  42,   0114.0,  -5.0,
    "Prince George, BC",  53,  55,   0122,  45,   0676.0,  -8.0,
    "Quebec, QC",  46,  49,   0,  71,  14,   0,  72.8,  -5.0,
    "Regina, SK",  50,  25,   0104,  39,   0574.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,   0106,  38,   0515.1,  -6.0,
    "Sault Sainte Marie, ON",  46,  31,   0,  84,  20,   0179.5,  -5.0,
    "Thunder Bay, ON",  48,  23,   0,  89,  15,   0187.8,  -5.0,
    "Toronto, ON",  43,  39,   0,  79,  23,   0115.5,  -5.0,
    "Vancouver, BC",  49,  16,   0123,   7,   0,  38.7,  -8.0,
    "Victoria, BC",  48,  25,   0123,  22,   0,  17.4,  -5.0,
    "Whitehorse, YT",  60,  43,   0135,   3,   0702.0,  -8.0,
    "Winnipeg, MB",  49,  53,   0,  97,   9,   0238.7,  -6.0,
    "Windsor, ON",  42,  18,   0,  83,   1,   0183.8,  -5.0,
    "Yellowknife, NT",  62,  27,   0114,  21,   0205.4,  -7.0
    )

    uscities = new Array(
    "Akron, OH",  41,   5,   0,  81,  30,   0266.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,   0307.8,  -5.0,
    "Austin, TX",  30,  16,   0,  97,  44,   0182.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,   0189.0,  -6.0,
    "Boise, ID",  43,  36,   0116,  12,   0865.0,  -7.0,
    "Boston, MA",  42,  21,   0,  71,   3,   0,   4.6,  -5.0,
    "Buffalo, NY",  42,  53,   0,  78,  52,   0214.9,  -5.0,
    "Charleston, WV",  38,  20,   0,  81,  37,   0286.2,  -5.0,
    "Chicago, IL",  41,  51,   0,  87,  39,   0185.0,  -6.0,
    "Cincinnati, OH",  39,   9,   0,  84,  27,   0264.9,  -5.0,
    "Cleveland, OH",  41,  29,   0,  81,  41,   0236.8,  -5.0,
    "Columbia, SC",  34,   0,   0,  81,   2,   0,  57.9,  -5.0,
    "Columbus, OH",  39,  57,   0,  82,  59,   0247.5,  -5.0,
    "Dallas, TX",  32,  46,   0,  96,  47,   0167.9,  -6.0,
    "Dayton, OH",  39,  45,   0,  84,  15,   0175.0,  -5.0,
    "Denver, CO",  39,  44,   0104,  59,   0,1610.3,  -7.0,
    "Des Moines, IA",  41,  36,   0,  93,  36,   0285.9,  -6.0,
    "Detroit, MI",  42,  20,   0,  83,   3,   0192.9,  -5.0,
    "El Paso, TX",  31,  45,   0106,  29,   0,1194.2,  -7.0,
    "Flint, MI",  43,   1,   0,  83,  41,   0228.6,  -5.0,
    "Grand Rapids, MI",  42,  58,   0,  85,  40,   0239.0,  -5.0,
    "Harrisburg, PA",  40,  16,   0,  76,  53,   0111.3,  -5.0,
    "Hartford, CT",  41,  46,   0,  72,  41,   0,  51.5,  -5.0,
    "Honolulu, HI",  21,  18,   0157,  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,   0241.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,   0226.2,  -6.0,
    "Lansing, MI",  42,  43,   0,  84,  33,   0253.0,  -5.0,
    "Lincoln, NE",  40,  48,   0,  96,  40,   0350.5,  -6.0,
    "Little Rock, AR",  34,  44,   0,  92,  17,   0,  78.3,  -6.0,
    "Los Angeles, CA",  34,   3,   0118,  14,   0,  29.6,  -8.0,
    "Louisville, KY",  38,  15,   0,  85,  45,   0145.4,  -5.0,
    "Madison, WI",  43,   4,   0,  89,  24,   0262.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,   0204.8,  -6.0,
    "Minneapolis, MN",  44,  58,   0,  93,  15,   0254.2,  -6.0,
    "Montgomery, AL",  32,  23,   0,  86,  18,   0,  48.8,  -6.0,
    "Nashville, TN",  36,   9,   0,  86,  47,   0179.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,   0391.7,  -6.0,
    "Omaha, NE",  41,  15,   0,  95,  56,   0303.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,   0112,   4,   0340.5,  -7.0,
    "Pittsburgh, PA",  40,  26,   0,  79,  59,   0227.7,  -5.0,
    "Portland, OR",  45,  31,   0122,  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,   0132.3,  -5.0,
    "Richmond, VA",  37,  33,   0,  77,  27,   0,  50.0,  -5.0,
    "Riverside, CA",  33,  57,   0117,  23,   0,   0.0,  -8.0,
    "Rochester, NY",  43,   9,   0,  77,  36,   0166.7,  -5.0,
    "Sacramento, CA",  38,  34,   0121,  29,   0,   9.1,  -8.0,
    "St. Paul, MN",  44,  57,   0,  93,   5,   0237.7,  -6.0,
    "St. Louis, MO",  38,  37,   0,  90,  11,   0163.1,  -6.0,
    "St. Petersburg, FL",  27,  46,   0,  82,  40,   0,   6.1,  -5.0,
    "Salem, OR",  44,  56,   0123,   2,   0,  47.2,  -8.0,
    "Salt Lake City, UT",  40,  45,   0111,  53,   0,1286.3,  -7.0,
    "San Antonio, TX",  29,  25,   0,  98,  29,   0240.2,  -6.0,
    "San Diego, CA",  32,  42,   0117,   9,   0,   4.0,  -8.0,
    "San Francisco, CA",  37,  46,   0122,  25,   0,   2.4,  -8.0,
    "San Jose, CA",  37,  20,   0121,  53,   0,  27.4,  -8.0,
    "Seattle, WA",  47,  36,   0122,  19,   0121.9,  -8.0,
    "Springfield, IL",  39,  48,   0,  89,  38,   0185.9,  -6.0,
    "Syracuse, NY",  43,   2,   0,  76,   8,   0125.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,   0178.3,  -5.0,
    "Topeka, KS",  39,   2,   0,  95,  40,   0283.5,  -6.0,
    "Tulsa, OK",  36,   9,   0,  95,  59,   0245.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 0index<100index 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.
    Last edited by f16fan12; 07-11-2006 at 09:16 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    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
    Code:
    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
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    //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.

  • #7
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or maybe something like this:

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

  • #8
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is probably better, but it still won't work.
    Code:
    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.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    The use of dimensioned arrays simplifys many tasks and is worth the effort to understand and use.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    New Coder
    Join Date
    Nov 2005
    Location
    Central Indiana
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The coding differences between the two are very trivial. Here's the version without dimensional arrays:

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

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

  • #11
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...ment.innerHTML but I still don't really understand it.

    2. In this line:
    Code:
     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
    Last edited by f16fan12; 07-12-2006 at 09:46 PM.

  • #12
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [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:
    Code:
    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:
    Code:
    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)
    However, associative arrays are not actually Arrays, but are in fact objects. Thus you would define them as (using curly braces):
    Code:
    // 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)
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #13
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 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...
    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):
    Code:
    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.
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #14
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #15
    New Coder
    Join Date
    Jul 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •