Solved

Form Drop Down With Javascript

Posted on 2006-10-24
11
372 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 17798384
 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
ID: 17798731
Can you elborate a little more
0
 
LVL 23

Expert Comment

by:basicinstinct
ID: 17799770
<select id="thirdChoice" name="thirdChoice" onchange="window.location = 'http://www.google.com/'">
0
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
LVL 41

Expert Comment

by:HonorGod
ID: 17802658
Yes, I can.  editing the code now....
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 17804279
<!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
 
LVL 41

Assisted Solution

by:HonorGod
HonorGod earned 100 total points
ID: 17805434
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
ID: 17858786
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
ID: 17904237
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
ID: 17914393
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
ID: 17921467
Thank you for the compliments, and the 'A'
0
 
LVL 6

Expert Comment

by:DonKyles
ID: 17933526
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
In this post we will learn how to make Android Gesture Tutorial and give different functionality whenever a user Touch or Scroll android screen.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Six Sigma Control Plans

691 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