0

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
3
Views
11 Years
Discussion Span
Last Post by jcmelbau
0

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

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

Jay

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.