populating 2nd dropdown list depending on selection of 1st dropdown

  • 14 years ago

    THIS IS MY ONCHANGE STATEMENT ON MY FIRST PULLDOWN BOX:

     <select name="Area1" size="1" onChange="BLOCKED SCRIPTLoad_List1();">

    <option value=""></option>
    <option value="JIM">QUAIL - Jim Edgar Panther Creek SFWA (Cass)</option>
    <option value="CAPT">QUAIL - Pyramid State Park - Captain Unit (Perry)</option></select>





    THIS IS WHAT THE ONCHANGE EXECUTES:

    var Dates1= new Array("Date1","Date2","Date3");
    var Dates2= new Array("Date10","Date11","Date12");



    function Load_List1()
    {
      var select_Area1 = document.form1.Area1;
      var Selected_Area1 = select_Area1.options[select_Area1.selectedIndex].value;
      var select_List1 = document.form1.Area1Date1;
      
      select_List1.options.length=0;
      if (selected_Area1 == "JIM"){
        for(var i=0; i<Dates1.length; i++)
       select_List1.options[select_List1.options.length] = new Option(Dates1[i]);
      }
      if (selected_Area1 == "CAPT"){
        for(var i=0; i<Dates2.length; i++)
       select_List1.options[select_List1.options.length] = new Option(Dates2[i]);
      }
    }   

















    THIS IS THE 2ND DROPDOWN BOX I'M TRYING TO POPULATE

    <select NAME="Area1Date1"><option></select></td>

    WHAT AM I DOING WRONG?

  • 14 years ago

    Maybe you can take a look at this!Smiley Face [:)]

    An example from JavaScript Source

    Hope this will help you

     

    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    team = new Array(
    new Array(
    new Array("Saku Koivu", 39482304),
    new Array("Martin Rucinsky", 34802389),
    new Array("Jeff Hackett", 39823498),
    new Array("Sheldon Sourray", 87587343),
    new Array("Richard Zednik", 68798735),
    new Array("Brian Savage", 98098509),
    new Array("Stephane Robidas", 49490583),
    new Array("Patrice Brisebois", 32898334),
    new Array("Oleg Petrov", 92340934),
    new Array("Chad Kilger", 34923409),
    new Array("Benoit Brunet", 59384093),
    new Array("Jan Bulis", 83948023),
    new Array("Patrick Traverse", 41239812),
    new Array("Jose Theodore", 98402398),
    new Array("Craig Darby", 82393434),
    new Array("Patric Poulin", 34290348),
    new Array("Karl Dykhuis", 89092834)
    ),
    new Array(
    new Array("Mario Lemieux", 23840238),
    new Array("Jaromir Jagr", 92390484),
    new Array("Robert Lang", 29048203),
    new Array("Alexei Kovalev", 94098230),
    new Array("Jean-Sebastien Aubin", 39234923),
    new Array("Kevin Stevens", 29345423)
    ),
    null,
    new Array(
    new Array("Alexei Yashin", 20394802),
    new Array("Daniel Alfredson", 34982039),
    new Array("Marian Hossa", 92348902),
    new Array("Patrick Lalime", 98203894),
    new Array("Radek Bonk", 98234902)
    )
    );
    function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
    var i, j;
    var prompt;
    // empty existing items
    for (i = selectCtrl.options.length; i >= 0; i--) {
    selectCtrl.options[i] = null;
    }
    prompt = (itemArray != null) ? goodPrompt : badPrompt;
    if (prompt == null) {
    j = 0;
    }
    else {
    selectCtrl.options[0] = new Option(prompt);
    j = 1;
    }
    if (itemArray != null) {
    // add new items
    for (i = 0; i < itemArray.length; i++) {
    selectCtrl.options[j] = new Option(itemArray[i][0]);
    if (itemArray[i][1] != null) {
    selectCtrl.options[j].value = itemArray[i][1];
    }
    j++;
    }
    // select first item (prompt) for sub list
    selectCtrl.options[0].selected = true;
       }
    }
    //  End -->
    </script>
    </HEAD>
    <BODY>
    <FORM NAME="main">
    <SELECT NAME="Make" onChange="fillSelectFromArray(this.form.Team, ((this.selectedIndex == -1) ? null : team[this.selectedIndex-1]));">
    <OPTION VALUE="-1">Select Team
    <OPTION VALUE=1>Montreal Canadiens
    <OPTION VALUE=2>Pittsburg Penguins
    <OPTION VALUE=3>Toronto Maple Leafs
    <OPTION VALUE=4>Ottawa Senators
    </SELECT>
    <BR>
    <SELECT NAME="Team" SIZE="5">
    <OPTION>                                  </OPTION>
    <OPTION>                                  </OPTION>
    <OPTION>                                  </OPTION>
    <OPTION>                                  </OPTION>
    <OPTION>                                  </OPTION>
    </SELECT>
    </FORM>
























































































    <p><center>
    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>





  • 14 years ago
    Thanks, Kevin
  • 14 years ago

    Thanks Kevin, but your code does not work;  However, I do really apprieciate your attempt in helping me.  Here's another version of the same attempt.  This isn't working either, and I can't figure out what I'm doing wrong.  I put a few display messages in it to see if the onchange was even executing the function command, and it is.

     

    [ tag - see following

    <%@LANGUAGE="Javascript"%>
    <html>
    <head>
    <title>Load Dropdown</title>
    <script language="JavaScript">
    <!--
    var tennisplayers= new array("Safin","Andre Agassi","Pete Sampras","Anna Kournik","Martina Hingis");
    var cricketplayers= new array("Sachin Tendulkar","Steve Waugh","Brian Lara","Sir Bradman");
    function set_player(){
      alert("Im here!!!!!")
      var select_sport= document.form1.sport;
      var select_player= document.form1.player;
      var selected_sport= select_sport.options[select_sport.selectedIndex].value;
      select_player.options.length=0;
      if (selected_sport == "tennis"){
        alert("Im at tennis")
     for(var i=0; i < tennisplayers.length; i++)
       select_player.options[select_player.options.length] = new Option(tennisplayer[i]);
      }
      if (selected_sport == "cricket"){
        for(var i=0; i < cricketplayers.length; i++)
       select_player.options[select_player.options.length] = new option(cricketplayer[i]);
      }

    -->
    </script>
    </head>
    <body>
    <form name="form1" method=">
    <table align="center" cellpadding="0" cellspacing="0" border="2" bordercolor="#000066">
      <tr valign="baseline" bgcolor="#66FFFF">
        <td nowrap align="left" width="182" valign="top">
          <div align="left"><b><font size="2" face="Arial, Helvetica, sans-serif">SPORT</font></b></div></td>
        <td width="219" nowrap="false"><font size="2" face="Times New Roman, Times, serif">
        <select name="sport" onChange="set_player();" size="1">
          <option value="tennis">Choose Sport
          <option value="tennis">Tennis
          <option value="cricket">Cricket
        </select>
      </tr> 
      <tr valign="baseline" bgcolor="#66FFFF">
        <td nowrap align="right" width="182" valign="top">
          <div align="left"><b><font size="2" face="Arial, Helvetica, sans-serif">PLAYERS</font></b></div></td>
        <td width="219" nowrap="false"><font size="2" face="Times New Roman, Times, serif">
        <select name="player">
          <option>             </option>
       <option>             </option>
       <option>             </option>
       <option>             </option>
       <option>             </option>
       <option>             </option>
        </select>
      </tr> 
    </form>
    </body>
    </html>






















































    end tag ]

Post a reply

Enter your message below

Sign in or Join us (it's free).

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Weeks of coding can save you hours of planning.”