Solved

Form Drop Down With Javascript

Posted on 2006-10-24
11
291 Views
Last Modified: 2010-04-16
I have a form that has three drop down boxes. I want the user to click on an item in the third box and it to link to another page. Can anyone help me with this?




<HEAD>

<script type="text/javascript">
<!--
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=form.thirdChoice.options.length;q>=0;q--) form.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) ;
  controlToPopulate.appendChild(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.setAttribute('value',x);
      // myEle.text = ItemArray[x] ;
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
    }
  }
}

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=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
  }
  // ADD Default Choice - in case there are no values
  myEle=document.createElement("option");
  theText=document.createTextNode("[SELECT]");
  myEle.appendChild(theText);
  myEle.setAttribute("value","0");
  controlToPopulate.appendChild(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.setAttribute("value",x);
      // myEle.text = ItemArray[x] ;
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
    }
  }
}
// -->
</script>
</HEAD>


*****************************************************************************

<BODY>

<form name=form>
<table align="center">
  <tr>
    <td>
      <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.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, form.thirdChoice, arrItems2, arrItemsGrp2);">
      </select>
      <select id="thirdChoice" name="thirdChoice">
      </select>
    </td>
  </tr>
</table>
</form>

0
Comment
Question by:dallasgrp
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
 When you update the option for list 3, you could add an onclick event, or an onchange to the list itself.
0
 
LVL 1

Author Comment

by:dallasgrp
Comment Utility
Can you elborate a little more
0
 
LVL 23

Expert Comment

by:basicinstinct
Comment Utility
<select id="thirdChoice" name="thirdChoice" onchange="window.location = 'http://www.google.com/'">
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Yes, I can.  editing the code now....
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>test - Q_22035780</title>
<head>
<script type='text/javascript'>
<!--
  var Cars   = { '[Select]' : null, 'Chevy Malibu' : 'chevy URL', 'Lincoln LS' : 'Lincoln URL', 'BMW Z3' : 'BMW URL'  };
  var Trucks = { '[Select]' : null, 'F-150' : 'F-150 URL', 'Tahoe' : 'Tahoe URL' };
  var Trains = { '[Select]' : null, 'Freight Train' : 'Freight URL', 'Passenger Train' : 'Amtrak URL' };
  var Lands  = { '[Select]' : null, 'Car' : Cars, 'Truck' : Trucks , 'Train' : Trains };

  var Boats  = { '[Select]' : null, 'Oil Tanker' : 'Oil Tanker URL', 'Fishing Boat' : 'Fishing Boat URL' };
  var Subs   = { '[Select]' : null, 'Los Angelas Class' : 'LA class URL', 'Kilo Class' : 'Kilo URL', 'Seawolf Class' : 'Seawolf URL' };
  var Seas   = { '[Select]' : null, 'Surface' : Boats, 'Submarine' : Subs }

  var Air20  = { '[Select]' : null, '747' : '747 URL', 'Cessna' : 'Cessna URL' };
  var Air21  = { '[Select]' : null, 'Kolb Flyer' : 'Kolb URL', 'Kitfox' : 'Kitfox URL' };
  var Air22  = { '[Select]' : null, 'Schweitzer Glider' : 'Schweitzer URL' };
  var Airs   = { '[Select]' : null, 'Commercial' : Air20, 'Small' : Air21, 'Other' : Air22 }

  var Land   = 'Truck,Train,Car'.split( ',' );
  var Sea    = 'Boat,Submarine'.split( ',' );
  var Air    = 'Planes,Ultralight,Glider'.split( ',' );
  var Choices = { 'Land' : Lands, 'Sea' : Seas, 'Air' : Airs };

  //------------------------------------------------------------------
  //  Name: populate()
  //  Role: To populate a select list based upon given input
  // Parms: selectObj  - The select group that was modified
  //        hash       - Associated array to be used for population
  //------------------------------------------------------------------
  function populate( selectObj, hash ) {
    //----------------------------------------------------------------
    // Determine the selection that was made from the specified list
    //----------------------------------------------------------------
    var pick  = selectObj.selectedIndex;
    var opts  = selectObj.getElementsByTagName( 'option' );
    var val   = opts[ pick ].firstChild.nodeValue;
    var items = hash[ val ];
    //----------------------------------------------------------------
    // Now, we want to remove any existing options in the middle group
    //----------------------------------------------------------------
    var target = document.getElementById( 'sel1' );
    while ( target.hasChildNodes() ) {
      target.removeChild( target.lastChild );
    }
    //----------------------------------------------------------------
    // Use the specified hash to populate the second select group
    //----------------------------------------------------------------
    for ( i in items ) {
      var opt = document.createElement( 'option' );
      opt.appendChild( document.createTextNode( i ) );
      target.appendChild( opt );
    }
    target.setAttribute( 'onchange', 'final(this,Choices["' + val + '"]);' );
  }

  //------------------------------------------------------------------
  //  Name: final()
  //  Role: To populate a select list based upon given input
  // Parms: selectObj - The select group that was modified
  //        hash      - Associative array of final selections
  //------------------------------------------------------------------
  function final( selectObj, hash ) {
    //----------------------------------------------------------------
    // Determine the selection that was made from the specified list
    //----------------------------------------------------------------
    var pick  = selectObj.selectedIndex;
    var opts  = selectObj.getElementsByTagName( 'option' );
    var val   = opts[ pick ].firstChild.nodeValue;
    var items = hash[ val ];
    //----------------------------------------------------------------
    // Now, we want to remove any existing options in the middle group
    //----------------------------------------------------------------
    var target = document.getElementById( 'sel2' );
    while ( target.hasChildNodes() ) {
      target.removeChild( target.lastChild );
    }
    //----------------------------------------------------------------
    // Use the array to populate the final select group
    //----------------------------------------------------------------
    for ( i in items ) {
      var opt = document.createElement( 'option' );
      opt.value = items[ i ];
      opt.appendChild( document.createTextNode( i ) );
      target.appendChild( opt );
    }
    target.setAttribute( 'onchange', 'pickit();' );
  }

  //------------------------------------------------------------------
  //  Name: pickit()
  //  Role: Do something with the user selection
  // Parms: selectObj - The select group that was modified
  //------------------------------------------------------------------
  function pickit() {
    //----------------------------------------------------------------
    // Determine the selection that was made from the specified list
    //----------------------------------------------------------------
    var sel   = document.getElementById( 'sel2' );
    var pick  = sel.selectedIndex;
    var opts  = sel.getElementsByTagName( 'option' );
    var url   = opts[ pick ].value;
    alert( url );
  }
// -->
</script>
</head>

<body>

<form action=''>
<table align='center'>
  <tr>
    <td>
      <select id='sel0' onchange='populate(this,Choices);'>
        <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='sel1'></select>
    </td>
    <td>
      <select id='sel2'></select>
    </td>
  </tr>
</table>
</form>

</body>
</html>
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 100 total points
Comment Utility
I like this one better
----------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>test - Q_22035780</title>
<head>
<script type='text/javascript'>
<!--
  var Cars   = { '[Select]' : null, 'Chevy Malibu' : 'chevy URL', 'Lincoln LS' : 'Lincoln URL', 'BMW Z3' : 'BMW URL'  };
  var Trucks = { '[Select]' : null, 'F-150' : 'F-150 URL', 'Tahoe' : 'Tahoe URL' };
  var Trains = { '[Select]' : null, 'Freight Train' : 'Freight URL', 'Passenger Train' : 'Amtrak URL' };
  var Lands  = { '[Select]' : null, 'Car' : Cars, 'Truck' : Trucks , 'Train' : Trains };

  var Boats  = { '[Select]' : null, 'Oil Tanker' : 'Oil Tanker URL', 'Fishing Boat' : 'Fishing Boat URL' };
  var Subs   = { '[Select]' : null, 'Los Angelas Class' : 'LA class URL', 'Kilo Class' : 'Kilo URL', 'Seawolf Class' : 'Seawolf URL' };
  var Seas   = { '[Select]' : null, 'Surface' : Boats, 'Submarine' : Subs }

  var Air20  = { '[Select]' : null, '747' : '747 URL', 'Cessna' : 'Cessna URL' };
  var Air21  = { '[Select]' : null, 'Kolb Flyer' : 'Kolb URL', 'Kitfox' : 'Kitfox URL' };
  var Air22  = { '[Select]' : null, 'Schweitzer Glider' : 'Schweitzer URL' };
  var Airs   = { '[Select]' : null, 'Commercial' : Air20, 'Small' : Air21, 'Other' : Air22 }

  var Choices = { 'Land' : Lands, 'Sea' : Seas, 'Air' : Airs };

  //------------------------------------------------------------------
  //  Name: populate()
  //  Role: To populate a select list based upon given input
  // Parms: id   - The id of the modified select group
  //        hash - Associated array to be used for population
  //------------------------------------------------------------------
  function populate( id, hash ) {
    //----------------------------------------------------------------
    // Determine the selection that was made from the specified list
    //----------------------------------------------------------------
    var sel   = document.getElementById( id );
    var pick  = sel.selectedIndex;
    var opts  = sel.getElementsByTagName( 'option' );
    var val   = opts[ pick ].firstChild.nodeValue;
    if ( 'hash' in sel ) {
      var items = sel.hash[ val ];
    } else {
      items = hash[ val ];         // This too should be a hash
      sel.hash = hash;
    }
    //----------------------------------------------------------------
    // Now, we want to remove any existing options in the child group
    //----------------------------------------------------------------
    var digit = id[ id.length - 1 ];
    var child = id.substring( 0, id.length - 1 ) + ( ( digit * 1 ) + 1 ) ;
    var nextSel = document.getElementById( child );
    while ( nextSel.hasChildNodes() ) {
      nextSel.removeChild( nextSel.lastChild );
    }
    nextSel.hash = items;
    //----------------------------------------------------------------
    // Use the specified hash to populate the second select group
    //----------------------------------------------------------------
    for ( i in items ) {
      var opt = document.createElement( 'option' );
      opt.appendChild( document.createTextNode( i ) );
      nextSel.appendChild( opt );
    }
//  alert( 'i = "' + i + '" -> ' + typeof( items[ i ] ) );
    var todo = ( typeof( items[ i ] ) == 'object' ) ? 'populate("' + child + '",null);' : 'pickit("' + child + '");'
    nextSel.setAttribute( 'onchange', todo );
  }

  //------------------------------------------------------------------
  //  Name: pickit()
  //  Role: Do something with the user selection
  // Parms: selectObj - The select group that was modified
  //------------------------------------------------------------------
  function pickit( id ) {
    //----------------------------------------------------------------
    // Determine the selection that was made from the specified list
    //----------------------------------------------------------------
    var sel   = document.getElementById( id );
    var pick  = sel.selectedIndex;
    var opts  = sel.getElementsByTagName( 'option' );
    var items = sel.hash;
    var url   = items[ opts[ pick ].value ];
    alert( url );
  }
// -->
</script>
</head>

<body>

<form action=''>
<table align='center'>
  <tr>
    <td>
      <select id='sel0' onchange='populate(this.id,Choices);'>
        <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='sel1'></select>
    </td>
    <td>
      <select id='sel2'></select>
    </td>
  </tr>
</table>
</form>

</body>
</html>
0
 
LVL 1

Author Comment

by:dallasgrp
Comment Utility
Honor God I am getting an error with your second set of code.

Error Message:

Line: 49
Char: 5
Error: 'null' is null or not an object
Code: 0
URL: abc.html
0
 
LVL 6

Accepted Solution

by:
DonKyles earned 400 total points
Comment Utility
The code below is look very stupid but it works like a charm!
Hope this one help your problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Triple Drop Down List</title>
<head>
<script type='text/javascript'>

function populate(x)
{
      // clear the option of the second drop down list
      var ddlTemp = document.form1.ddlSecond;
      for (i=ddlTemp.options.length-1;i>0; i--)
            ddlTemp.options[i] = null;
                  
      // check if the user select nothing at the first drop down list
      if ( x == 0)
      {
            document.form1.ddlSecond.options[0] = new Option('<-- Select', 0);
            document.form1.ddlSecond.options[0].selected = true;
            populate2(0,0);
      }
      else
      {
            // find the total number of choices of the first drop down list
            var firstGroupChoice = document.form1.ddlFirst.options.length;
            // create an arry that equal to the total number of choices of the first drop down list
            var secondGroup = new Array(firstGroupChoice);
      
            // insert value into the array
            secondGroup[0] = new Array();
            secondGroup[0][0] = new Option('<--- Select', 0);
            
            // choice Land
            secondGroup[1] = new Array();
            secondGroup[1][0] = new Option('Select one', 0);
            secondGroup[1][1] = new Option('Car', 1);
            secondGroup[1][2] = new Option('Truck', 2);
            secondGroup[1][3] = new Option('Train', 3);
            
            // choice Sea
            secondGroup[2] = new Array();
            secondGroup[2][0] = new Option('Select one', 0);
            secondGroup[2][1] = new Option('Boat', 1);
            secondGroup[2][2] = new Option('Submarine', 2);
            
            // choice Air
            secondGroup[3] = new Array();
            secondGroup[3][0] = new Option('Select one', 0);
            secondGroup[3][1] = new Option('Planes', 1);
            secondGroup[3][2] = new Option('Ultralight', 2);
            secondGroup[3][3] = new Option('Glider', 3);
                        
            // insert the option into the second drop down list
            for (j=0; j<secondGroup[x].length;j++)
                  ddlTemp.options[j]= new Option(secondGroup[x][j].text,secondGroup[x][j].value)
            
            ddlTemp.options[0].selected = true;
      }
}

function populate2(x, y)
{
      // clear the option of the third drop down list
      var ddlTemp = document.form1.ddlThird;
      for (i=ddlTemp.options.length-1;i>0; i--)
            ddlTemp.options[i] = null;
      
      // check if the user select nothing at the first drop down list
      if (y == 0 || x == 0)
      {
            document.form1.ddlThird.options[0] = new Option('<-- Select', 0);
            document.form1.ddlThird.options[0].selected = true;
      }
      else
      {      
            // same explanation of the previous function
            var firstGroupChoice = document.form1.ddlFirst.options.length;
            var secondGroupChoice = document.form1.ddlSecond.options.length;
            var thirdGroup = new Array(secondGroupChoice);
            
            thirdGroup[0] = new Array();
            thirdGroup[0][0] = new Array();
            thirdGroup[0][0][0] = new Option('<--- Select', 0);
            
            thirdGroup[1] = new Array(secondGroupChoice);
            thirdGroup[1][0] = new Array();
            thirdGroup[1][0][0] = new Option('<--- Select', 0);
            
            thirdGroup[1] = new Array(secondGroupChoice);
            thirdGroup[1][1] = new Array();
            thirdGroup[1][1][0] = new Option('Select', 0);
            thirdGroup[1][1][1] = new Option('Chevy Malibu', 1);
            thirdGroup[1][1][2] = new Option('Lincoln LS', 2);
            thirdGroup[1][1][3] = new Option('BMW Z3', 3);
            
            thirdGroup[1][2] = new Array();
            thirdGroup[1][2][0] = new Option('Select', 0);
            thirdGroup[1][2][1] = new Option('F-150', 1);
            thirdGroup[1][2][2] = new Option('Tahoe', 2);
            
            thirdGroup[1][3] = new Array();
            thirdGroup[1][3][0] = new Option('Select', 0);
            thirdGroup[1][3][1] = new Option('Freight Train', 1);
            thirdGroup[1][3][2] = new Option('Passenger Train', 2);
      
            // ------------------------------------------------------
            thirdGroup[2] = new Array(secondGroupChoice);
            thirdGroup[2][0] = new Array();
            thirdGroup[2][0][0] = new Option('<--- Select', 0);
            
            thirdGroup[2] = new Array(secondGroupChoice);
            thirdGroup[2][1] = new Array();
            thirdGroup[2][1][0] = new Option('Select', 0);
            thirdGroup[2][1][1] = new Option('Oil Tanker', 1);
            thirdGroup[2][1][2] = new Option('Fishing Boat', 2);
            
            thirdGroup[2][2] = new Array();
            thirdGroup[2][2][0] = new Option('Select', 0);
            thirdGroup[2][2][1] = new Option('Los Angelas Class', 1);
            thirdGroup[2][2][2] = new Option('Kilo Class', 2);
            thirdGroup[2][2][3] = new Option('Seawolf Class', 3);
                        
            // ------------------------------------------------------
            thirdGroup[3] = new Array(secondGroupChoice);
            thirdGroup[3][0] = new Array();
            thirdGroup[3][0][0] = new Option('<--- Select', 0);
            
            thirdGroup[3] = new Array(secondGroupChoice);
            thirdGroup[3][1] = new Array();
            thirdGroup[3][1][0] = new Option('Select', 0);
            thirdGroup[3][1][1] = new Option('747', 1);
            thirdGroup[3][1][2] = new Option('Cessna', 2);
            
            thirdGroup[3][2] = new Array();
            thirdGroup[3][2][0] = new Option('Select', 0);
            thirdGroup[3][2][1] = new Option('Kolb Flyer', 1);
            thirdGroup[3][2][2] = new Option('Kitfox', 2);
            
            thirdGroup[3][3] = new Array();
            thirdGroup[3][3][0] = new Option('Select', 0);
            thirdGroup[3][3][1] = new Option('Schwietzer Glider', 1);
      
            for (k=0; k<thirdGroup[x].length;k++)
            {
                  ddlTemp.options[k]= new Option(thirdGroup[x][y][k].text,thirdGroup[x][y][k].value)
            }
            ddlTemp.options[0].selected = true;
      
      }
      
}

function populate3(x, y, z)
{
      // -------------- do what ever you want to do --------------------
      alert ('x = ' + x + '\ny = ' + y + '\nz = ' + z);
}
// -->
</script>
</head>
<body>
<form name="form1">
<table align='center'>
  <tr>
    <td>
      <select id="ddlFirst" onchange="populate(this.options.value);">
        <option value="0">Select One</option>
        <option value="1">Land</option>
        <option value="2">Sea</option>
        <option value="3">Air</option>
      </select>
    </td>
    <td>
      <select name="ddlSecond" onChange="populate2(document.form1.ddlFirst.value, this.options.value);">
              <option value="0"><--- Select</option>
        </select>
    </td>
    <td>
      <select name="ddlThird" onChange="populate3(document.form1.ddlFirst.value,document.form1.ddlSecond.value,this.options.value);">
              <option value="0"><--- Select</option>
        </select>
    </td>
  </tr>
</table>
</form>
</body>
</html>
0
 
LVL 1

Author Comment

by:dallasgrp
Comment Utility
For anyone who is intrested this is how its done. Take time to note DonKyles Populate function has been changed. Thanks to his and honor gods help. Obviously what we want is a conditional redirect rather than an alert but since Don set up the variables its a simple if else statement keying in on an X,Y,Z value combinations and there you go done and done. I just wanted to post this because it can't help anyone in the future if they don't know what the final outcome was.

Thanks to all the wonderful experts on here you guys are what makes this the best site of its kind
*************************************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Triple Drop Down List</title>
<head>
<script type='text/javascript'>

function populate(x)
{
     // clear the option of the second drop down list
     var ddlTemp = document.form1.ddlSecond;
     for (i=ddlTemp.options.length-1;i>0; i--)
          ddlTemp.options[i] = null;
               
     // check if the user select nothing at the first drop down list
     if ( x == 0)
     {
          document.form1.ddlSecond.options[0] = new Option('<-- Select', 0);
          document.form1.ddlSecond.options[0].selected = true;
          populate2(0,0);
     }
     else
     {
          // find the total number of choices of the first drop down list
          var firstGroupChoice = document.form1.ddlFirst.options.length;
          // create an arry that equal to the total number of choices of the first drop down list
          var secondGroup = new Array(firstGroupChoice);
     
          // insert value into the array
          secondGroup[0] = new Array();
          secondGroup[0][0] = new Option('<--- Select', 0);
         
          // choice Land
          secondGroup[1] = new Array();
          secondGroup[1][0] = new Option('Select one', 0);
          secondGroup[1][1] = new Option('Car', 1);
          secondGroup[1][2] = new Option('Truck', 2);
          secondGroup[1][3] = new Option('Train', 3);
         
          // choice Sea
          secondGroup[2] = new Array();
          secondGroup[2][0] = new Option('Select one', 0);
          secondGroup[2][1] = new Option('Boat', 1);
          secondGroup[2][2] = new Option('Submarine', 2);
         
          // choice Air
          secondGroup[3] = new Array();
          secondGroup[3][0] = new Option('Select one', 0);
          secondGroup[3][1] = new Option('Planes', 1);
          secondGroup[3][2] = new Option('Ultralight', 2);
          secondGroup[3][3] = new Option('Glider', 3);
                   
          // insert the option into the second drop down list
          for (j=0; j<secondGroup[x].length;j++)
               ddlTemp.options[j]= new Option(secondGroup[x][j].text,secondGroup[x][j].value)
         
          ddlTemp.options[0].selected = true;
     }
}

function populate2(x, y)
{
     // clear the option of the third drop down list
     var ddlTemp = document.form1.ddlThird;
     for (i=ddlTemp.options.length-1;i>0; i--)
          ddlTemp.options[i] = null;
     
     // check if the user select nothing at the first drop down list
     if (y == 0 || x == 0)
     {
          document.form1.ddlThird.options[0] = new Option('<-- Select', 0);
          document.form1.ddlThird.options[0].selected = true;
     }
     else
     {    
          // same explanation of the previous function
          var firstGroupChoice = document.form1.ddlFirst.options.length;
          var secondGroupChoice = document.form1.ddlSecond.options.length;
          var thirdGroup = new Array(secondGroupChoice);
         
          thirdGroup[0] = new Array();
          thirdGroup[0][0] = new Array();
          thirdGroup[0][0][0] = new Option('<--- Select', 0);
         
          thirdGroup[1] = new Array(secondGroupChoice);
          thirdGroup[1][0] = new Array();
          thirdGroup[1][0][0] = new Option('<--- Select', 0);
         
          thirdGroup[1] = new Array(secondGroupChoice);
          thirdGroup[1][1] = new Array();
          thirdGroup[1][1][0] = new Option('Select', 0);
          thirdGroup[1][1][1] = new Option('Chevy Malibu', 1);
          thirdGroup[1][1][2] = new Option('Lincoln LS', 2);
          thirdGroup[1][1][3] = new Option('BMW Z3', 3);
         
          thirdGroup[1][2] = new Array();
          thirdGroup[1][2][0] = new Option('Select', 0);
          thirdGroup[1][2][1] = new Option('F-150', 1);
          thirdGroup[1][2][2] = new Option('Tahoe', 2);
         
          thirdGroup[1][3] = new Array();
          thirdGroup[1][3][0] = new Option('Select', 0);
          thirdGroup[1][3][1] = new Option('Freight Train', 1);
          thirdGroup[1][3][2] = new Option('Passenger Train', 2);
     
          // ------------------------------------------------------
          thirdGroup[2] = new Array(secondGroupChoice);
          thirdGroup[2][0] = new Array();
          thirdGroup[2][0][0] = new Option('<--- Select', 0);
         
          thirdGroup[2] = new Array(secondGroupChoice);
          thirdGroup[2][1] = new Array();
          thirdGroup[2][1][0] = new Option('Select', 0);
          thirdGroup[2][1][1] = new Option('Oil Tanker', 1);
          thirdGroup[2][1][2] = new Option('Fishing Boat', 2);
         
          thirdGroup[2][2] = new Array();
          thirdGroup[2][2][0] = new Option('Select', 0);
          thirdGroup[2][2][1] = new Option('Los Angelas Class', 1);
          thirdGroup[2][2][2] = new Option('Kilo Class', 2);
          thirdGroup[2][2][3] = new Option('Seawolf Class', 3);
                   
          // ------------------------------------------------------
          thirdGroup[3] = new Array(secondGroupChoice);
          thirdGroup[3][0] = new Array();
          thirdGroup[3][0][0] = new Option('<--- Select', 0);
         
          thirdGroup[3] = new Array(secondGroupChoice);
          thirdGroup[3][1] = new Array();
          thirdGroup[3][1][0] = new Option('Select', 0);
          thirdGroup[3][1][1] = new Option('747', 1);
          thirdGroup[3][1][2] = new Option('Cessna', 2);
         
          thirdGroup[3][2] = new Array();
          thirdGroup[3][2][0] = new Option('Select', 0);
          thirdGroup[3][2][1] = new Option('Kolb Flyer', 1);
          thirdGroup[3][2][2] = new Option('Kitfox', 2);
         
          thirdGroup[3][3] = new Array();
          thirdGroup[3][3][0] = new Option('Select', 0);
          thirdGroup[3][3][1] = new Option('Schwietzer Glider', 1);
     
          for (k=0; k<thirdGroup[x].length;k++)
          {
               ddlTemp.options[k]= new Option(thirdGroup[x][y][k].text,thirdGroup[x][y][k].value)
          }
          ddlTemp.options[0].selected = true;
     
     }
     
}

function populate3(x, y, z)
{
  if(x == 2 && y == 2)
    {
      window.location="http://www.microsoft.com";
    }

  else if (x == 1 && y == 2)
    {
      window.location="http://www.yahoo.com";
    }

  else
    {
        window.location="http://www.google.com";
    }
}
// -->
</script>
</head>
<body>
<form name="form1">
<table align='center'>
  <tr>
    <td>
      <select id="ddlFirst" onchange="populate(this.options.value);">
        <option value="0">Select One</option>
        <option value="1">Land</option>
        <option value="2">Sea</option>
        <option value="3">Air</option>
      </select>
    </td>
    <td>
      <select name="ddlSecond" onChange="populate2(document.form1.ddlFirst.value, this.options.value);">
            <option value="0"><--- Select</option>
       </select>
    </td>
    <td>
      <select name="ddlThird" onChange="populate3(document.form1.ddlFirst.value,document.form1.ddlSecond.value,this.options.value);">
            <option value="0"><--- Select</option>
       </select>
    </td>
  </tr>
</table>
</form>
</body>
</html>
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Thank you for the compliments, and the 'A'
0
 
LVL 6

Expert Comment

by:DonKyles
Comment Utility
Thank for the compliments.

At the populate3 function, I made the alert because I want to show the final value of selection. When you have the values you can do whatever you want to do using ifelse statement, switch, etc.

For this issue, there is the other way to make it more easy to redirect the page since dallasgrp didn't give the information for the final step but I guess it should be like the code below

- inside the populate2 function
instead of

thirdGroup[1][1][1] = new Option('Chevy Malibu', 1);
thirdGroup[1][1][2] = new Option('Lincoln LS', 2);
thirdGroup[1][1][3] = new Option('BMW Z3', 3);

change to

thirdGroup[1][1][1] = new Option('Chevy Malibu', 'http://chevrolet.com');
thirdGroup[1][1][2] = new Option('Lincoln LS', 'http://linconl.com');
thirdGroup[1][1][3] = new Option('BMW Z3', 'http://bmw.com');

Finally, in the populate3 function,
function populate3(z)
{
    window.location = z;
}

and inside the html code

<select name="ddlThird" onChange="populate3(this.options.value);">
        <option value="0"><--- Select</option>
</select>

This can redirect the current page to the new site.

This is my final conclusion.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Since upgrading to Office 2013 or higher installing the Smart Indenter addin will fail. This article will explain how to install it so it will work regardless of the Office version installed.
A short article about problems I had with the new location API and permissions in Marshmallow
An introduction to basic programming syntax in Java by creating a simple program. Viewers can follow the tutorial as they create their first class in Java. Definitions and explanations about each element are given to help prepare viewers for future …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now