Re: Witango-Talk: Dynamic multiple pull down menus

Chris Smith Sun, 13 Oct 2002 09:54:16 -0700


<!-- TWO STEPS TO INSTALL DROPDOWN BOX POPULATION:


  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:  Andrew Berry ([EMAIL PROTECTED]) -->
<!-- Web Site:  http://www.berrysystems.com -->

<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;

arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;

arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0

arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1

arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2

arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5

arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3

arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4

arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6

arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7

function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--)
controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=myChoices.thirdChoice.options.length;q>=0;q--)
myChoices.thirdChoice.options[q] = null;
 }
  // ADD Default Choice - in case there are no values
  myEle = document.createElement("option") ;
  myEle.value = 0 ;
  myEle.text = "[SELECT]" ;
  controlToPopulate.add(myEle) ;
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ )
    {
      if ( GroupArray[x] == control.value )
        {
          myEle = document.createElement("option") ;
          myEle.value = x ;
          myEle.text = ItemArray[x] ;
          controlToPopulate.add(myEle) ;
        }
    }
}
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this,
myChoices.secondChoice, arrItems1, arrItemsGrp1);">
 <option value=0 SELECTED>[SELECT]</option>
 <option value=1>Land</option>
 <option value=2>Sea</option>
 <option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this,
myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</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>

<!-- Script Size:  3.92 KB -->
----- Original Message -----
From: "Manuel de Aguiar" <[EMAIL PROTECTED]>
To: "Multiple recipients of list witango-talk" <[EMAIL PROTECTED]>
Sent: Sunday, October 13, 2002 12:43 PM
Subject: Witango-Talk: Dynamic multiple pull down menus


> Picture this:
> Two pull down menus on one page.  The first pull dow is populated on load.
>
> pull down 1
>
>     * fruits
>     * vegetables
>     * meats
>
>
> The second pull down options are:
>
>     * carrots
>     * steak
>     * apples
>     * tomatoes
>     * pork chops
>     * bananas
>
> HOWEVER the second pull down will be populated based on the onChange
> event of the first pull down.  For example if the user selected fruits
> on the first pull down then the options of the second pull down will be:
>
>     * apples
>     * bananas
>
> I thank all in advance for any help provided on how can I do this.
> TIA,
> Manuel
>
>
>
> ________________________________________________________________________
> TO UNSUBSCRIBE: send a plain text/US ASCII email to [EMAIL PROTECTED]
>                 with unsubscribe witango-talk in the message body

________________________________________________________________________
TO UNSUBSCRIBE: send a plain text/US ASCII email to [EMAIL PROTECTED]
                with unsubscribe witango-talk in the message body

Re: Witango-Talk: Dynamic multiple pull down menus

Reply via email to