Member Avatar for jcmelbau

Hi all,

I am trying to create a drop down form on a webpage where the items that appear in the second drop down box are dependant on what is chosen in the first.

For example, choose country, then state etc.

Can anyone provide some really easy to understand help for me as I am a bif of a novice with JS.

Thanks!!

Jay

  • 2 Contributors
  • 2 Replies
  • 111 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by jcmelbau
Member Avatar for jalarie

Perhaps this will give you a place to start. Notice the "States" array beginning about line 20; each major group (country, in this case) has an equals (=) sign followed by the code for that group. Within each group are multiple lines each having a code (state, whatever) followed by a semicolon and then the name. The final "=end" is required.

When you select a country, the first function clears any existing State values, then loops through the array to find all States belonging to that country to repopulate the State select list.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US">
  <head>

    <title>Dropdows</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Language" content="en-US" />
    <meta name="Author" content="James Alarie - jalarie@umich.edu" />
    
    <link rel="icon" href="favicon.ico" />
    <link rev="made" href="mailto:jalarie@umich.edu" />
    
    <script type="text/javascript">
      <!-- Hide this code from non-JavaScript browsers
        States=new Array(
          '=USA',
            "AA;Armed Forces - Americas",           // military
            "AE;Armed Forces - Europe",             // military
            "AP;Armed Forces - Pacific",            // military
            "AL;Alabama",
            "AK;Alaska",
            "AS;American Samoa",                    // territory
            "AZ;Arizona",
            "AR;Arkansas",
            "CA;California",
            "CO;Colorado",
            "CT;Connecticut",
            "DE;Delaware",
            "DC;District of Columbia",              // our nation's capital
            "FM;Federated States of Micronesia",    // territory
            "FL;Florida",
          '=USSR',
            "UK;Ukraine",
            "RS;Russia",
          '=end'
        );
        function DoStates() {
          f1=document.forms[0];                     // abbreviation
          CIndex=f1.Country.selectedIndex;
          CValue=f1.Country.options[CIndex].value;
          for (SIndex=f1.State.length; SIndex>=0; SIndex=SIndex-1) {
            f1.State.options[SIndex]=null;
          }
          CopySwitch='no';
          for (AIndex=0; AIndex<States.length; AIndex++) {
            State=States[AIndex];
            if (State.substring(0,1) == '=') {
              if (State.substring(1) == CValue) {
                CopySwitch='yes';
              } else {
                CopySwitch='no';
              }
            } else {
              SValues=State.split(/;/);
              if (CopySwitch == 'yes') {
                SIndex=f1.State.length;
                f1.State.options[SIndex]=new Option();
                f1.State.options[SIndex].value=SValues[0];
                f1.State.options[SIndex].text=SValues[1];
              }
            }
          }
        } // DoStates
        function PickedState() {
          f1=document.forms[0];                     // abbreviation
          SIndex=f1.State.selectedIndex;
          SValue=f1.State.options[SIndex].value;
          SText=f1.State.options[SIndex].text;
          alert(SValue+': '+SText);
        } // PickedState
      // End hiding -->
    </script>

  </head>

  <body background="jaa_bgnd.jpg" bgcolor="#ffffee" text="black"
      link="blue" vlink="#800088" alink="red">
<!-- Page Header -->
    <div class="header">
      <center><h1>Dropdows</h1></center>
      <hr />
    </div>

<!-- Content -->
    <div class="content">
      <br />
      <noscript>
        <font color="red">
          You must have javascript to make use of this page.
        </font>
      </noscript>
      
      <center>
        <form method="post" action="">
          Country:&nbsp; 
          <select name="Country" id="Country" onchange="DoStates();">
            <option value="">- pick one -</option>
            <option value="USA">United States of America</option>
            <option value="USSR">Union of Soviet Socialist Republics</option>
          </select>
          <br />
          State:&nbsp; 
          <select name="State" id="State" onchange="PickedState();">
            <option value="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </option>
          </select>
          <br />
          <input type="reset" value=" Reset " title=" Reset " />
        </form>
        
      </center>
  
    </div>
  
<!-- Page Footer -->
    <div class="footer">
      <br clear="all" /><hr />
      Written on September 12, 2006, by:&nbsp;
      <a href="mailto:jalarie@umich.edu">James Alarie</a>
    </div>

  </body>

</html>
Member Avatar for jcmelbau

Excellent! Thank you so much for your help!! It is very much appreciated.

Jay

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.