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.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post

    Regarding Element Adding via Select Options

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

    Here is the basic:

    Code:
    <html>
    
    <head>
     <title>Index</title>
     <meta name="robots" content="noindex,nofollow" />
     <style type="text/css">
     </style>
    <head>
    
    <body>
     <script type="text/javascript">
    fuction country()
    {
    var country;
    var a=document.getElementById("us");
    var b=document.getElementById("can");
    var c=document.getElementById("misc");
    
    if (country==a) document.write("<select><option>New 
    
    Hampshire</option><option>Alabama</option<option>Alaska</option></select>");
    else if (country==b) document.write("<select><option>New 
    
    Brunswick</option><option>Alberta</option<option>Quebec</option></select>");
    else (country==c) document.write("<select><option>England</option><option>France</option<option>China</option></select>");
    }
     </script>
    
     <select>
      <option id="us" onselect="country()">United States</option>
      <option id="can" onselect="country()">Canada</option>
      <option id="misc" onselect="country()">Other</option>
     </select>
     
     <select>
     </select>
    </body>
    
    </html>
    Many thanks in advance for any suggestions correcting my errors.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,795
    Thanks
    19
    Thanked 156 Times in 147 Posts
    I was having trouble getting innerHTML to work for populating options of a select menu....I used the DOM instead to populate the second menu with different choices, and innerHTML to clear the select menu options when a new item in the first menu is selected:

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

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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