Populate multiple dropdowns

I've used a script I've found to populate a dropdown depending on what was selected on the previous dropdown, the results are coming out of a database and work fine. What I need to do is populate a third dropdown depending on the outcome of the second. I'm not sure how to adapt the code I've got, can anyone help me?

Here is my code:


<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/summer.asp" -->
<%
Dim RSdesign
Dim RSdesign_numRows
 
Set RSdesign = Server.CreateObject("ADODB.Recordset")
RSdesign.ActiveConnection = MM_summer_STRING
RSdesign.Source = "SELECT * FROM list ORDER BY listDesign ASC"
RSdesign.CursorType = 0
RSdesign.CursorLocation = 2
RSdesign.LockType = 1
RSdesign.Open()
 
RSdesign_numRows = 0
%>
<%
Dim RSfinish
Dim RSfinish_numRows
 
Set RSfinish = Server.CreateObject("ADODB.Recordset")
RSfinish.ActiveConnection = MM_summer_STRING
RSfinish.Source = "SELECT * FROM colours ORDER BY colourName ASC"
RSfinish.CursorType = 0
RSfinish.CursorLocation = 2
RSfinish.LockType = 1
RSfinish.Open()
 
RSfinish_numRows = 0
%>
<%
Dim RSsubcat
Dim RSsubcat_numRows
 
Set RSsubcat = Server.CreateObject("ADODB.Recordset")
RSsubcat.ActiveConnection = MM_summer_STRING
RSsubcat.Source = "SELECT * FROM sublist ORDER BY subcatName ASC"
RSsubcat.CursorType = 0
RSsubcat.CursorLocation = 2
RSsubcat.LockType = 1
RSsubcat.Open()
 
RSsubcat_numRows = 0
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Summerbridge Doors - Home Page</title>
<link href="summerbridge.css" rel="stylesheet" type="text/css" />
<link href="datePicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function() { 
			myCal = new Calendar({ date: 'd/m/Y' }, { classes: ['dashboard'], direction: 1, tweak: {x: 3, y: -3} });
		});
</script>
<script type="text/javascript">
<!--
var arrDynaList = new Array();
var arrDL1 = new Array();
 
arrDL1[1] = "design";
arrDL1[2] = "form1";
arrDL1[3] = "spec1";
arrDL1[4] = "form1";
arrDL1[5] = arrDynaList;
  
<%
Dim txtDynaListRelation, txtDynaListLabel, txtDynaListValue, oDynaListRS
 
txtDynaListRelation = "category" 	' Name of recordset field relating to parent
txtDynaListLabel = "subcatName" 		' Name of recordset field for child Item Label
txtDynaListValue = "subcatID" 			' Name of recordset field for child Value
Set oDynaListRS = RSsubcat			' Name of child list box recordset
  
Dim varDynaList
varDynaList = -1
 
Dim varMaxWidth
varMaxWidth = "1"
 
Dim varCheckGroup
varCheckGroup = oDynaListRS.Fields.Item(txtDynaListRelation).Value
 
Dim varCheckLength
varCheckLength = 0
 
Dim varMaxLength
varMaxLength = 0
 
While (NOT oDynaListRS.EOF)
 
 If (varCheckGroup <> oDynaListRS.Fields.Item(txtDynaListRelation).Value) Then
  If (varCheckLength > varMaxLength) Then
   varMaxLength = varCheckLength
  End If
  varCheckLength = 0
 End If
%>
arrDynaList[<%=(varDynaList+1)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListRelation).Value)%>"
arrDynaList[<%=(varDynaList+2)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListLabel).Value)%>"
arrDynaList[<%=(varDynaList+3)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListValue).Value)%>"
<%
 If (len(oDynaListRS.Fields.Item(txtDynaListLabel).Value) > len(varMaxWidth)) Then
  varMaxWidth = oDynaListRS.Fields.Item(txtDynaListLabel).Value
 End If
 varCheckLength = varCheckLength + 1
 varDynaList = varDynaList + 3
 oDynaListRS.MoveNext()
Wend
 
If (varCheckLength > varMaxLength) Then
 varMaxLength = varCheckLength
End If
%>
//-->
</script>
<script type="text/javascript" src="product-search.js"></script>
</head>
 
<body id="order">
<div id="container">
  <div id="top">
    <h1 class="hide">Summerbridge Doors</h1>
	<div id="logo"><a href="index.asp"><img src="images/logo.gif" alt="Summerbridge Doors" width="294" height="31" border="0" /></a></div>
    <div id="nav">
    <ul>
      <li><a href="index.asp">home</a></li>
      <li><a href="products.asp">products</a></li>
      <li><a href="services.asp">services</a></li>
      <li><a href="news.asp">news</a></li>
      <li class="onstate">order form</li>
      <li><a href="contact.asp">contact us </a></li>
    </ul>
  </div>
  </div>
  <div id="content">
    <div id="fullcol">
    <h2>Place an Order</h2>
    <form action="order-form.asp" method="post" name="form1" id="form1">
      <input type="hidden" name="formsent" value="yes" />
      <fieldset>
      <legend>Your Details</legend>
        <p>
        <label for="Customer">Customer:</label>
        <input name="Customer" type="text" id="Customer" />
      </p>
        <p>
        <label for="Reference">Reference:</label>
        <input name="Reference" type="text" id="Reference" />
      </p>
        <p>
        <label for="CustRef">Customer Ref:</label>
        <input name="CustRef" type="text" id="CustRef" />
      </p>
        <p>
        <label for="Finish">Finish:</label>
        <select name="Finish" id="Finish">
          <option value="">Please Select &gt;</option>
          <%
While (NOT RSfinish.EOF)
%>
          <option value="<%=(RSfinish.Fields.Item("colourID").Value)%>"><%=(RSfinish.Fields.Item("colourName").Value)%></option>
          <%
  RSfinish.MoveNext()
Wend
If (RSfinish.CursorType > 0) Then
  RSfinish.MoveFirst
Else
  RSfinish.Requery
End If
%>
        </select>
        </p>
        <p>
        <label for="Reverse">Reverse Colour:</label>
        <select name="Reverse" id="Reverse">
          <option selected="selected">Please Select &gt;</option>
          <option value="Amati">Amati</option>
          <option value="Aviemore Pine">Aviemore Pine</option>
          <option value="Beech">Beech</option>
          <option value="Blonde Ash">Blonde Ash</option>
          <option value="Calvados">Calvados</option>
          <option value="Hardrock Maple">Hardrock Maple</option>
          <option value="Light Oak">Light Oak</option>
          <option value="Loire Ash">Loire Ash</option>
          <option value="Maple">Maple</option>
          <option value="Montana Oak">Montana Oak</option>
          <option value="Natural Birch">Natural Birch</option>
          <option value="Northumberland PA">Northumberland PA</option>
          <option value="Ontario Maple">Ontario Maple</option>
          <option value="Pippy Oak">Pippy Oak</option>
          <option value="Plain Black">Plain Black</option>
          <option value="Plain Cream">Plain Cream</option>
          <option value="Plain Ivory">Plain Ivory</option>
          <option value="Plain White">Plain White</option>
          <option value="Red Alder">Red Alder</option>
          <option value="Smoked Maple">Smoked Maple</option>
          <option value="Steel">Steel</option>
          <option value="Swiss Pear">Swiss Pear</option>
          <option value="Tobacco Walnut">Tobacco Walnut</option>
          <option value="Vanilla">Vanilla</option>
          <option value="Verade Oak">Verade Oak</option>
          <option value="Walnut">Walnut</option>
          <option value="Wendland Birch">Wendland Birch</option>
          <option value="Wildburn">Wildburn</option>
          <option value="Winsford Oak">Winsford Oak</option>
        </select>
        </p>
        <p>
        <label for="date">Delivery Date:</label>
        <input name="date" type="text" id="date" />
      </p>
      </fieldset>
      <fieldset>
      <legend>Order Details</legend>
        <p>
			<select name="design" id="design" onchange="setDynaList(arrDL1)">
			  <option value="">Design &gt;</option>
			  <%
While (NOT RSdesign.EOF)
%>
			  <option value="<%=(RSdesign.Fields.Item("listID").Value)%>"><%=(RSdesign.Fields.Item("listDesign").Value)%></option>
			  <%
  RSdesign.MoveNext()
Wend
If (RSdesign.CursorType > 0) Then
  RSdesign.MoveFirst
Else
  RSdesign.Requery
End If
%>
		  </select>
        <select name="spec1" id="spec1">
          <option value="">Specification 1 &gt;</option>
        </select>
        <select name="Specification2" id="Specification2">
          <option>Specification 2 &gt;</option>
        </select>
        <input name="Height" type="text" id="Height" value="Height" size="4" />
        <input name="Width" type="text" id="Width" value="Width" size="4" />
        <input name="Quantity" type="text" id="Quantity" size="1" />
      </p>
        <p>
        <label for="enquiry">Special order information:</label>
        <textarea name="enquiry" cols="20" rows="4" id="enquiry"></textarea>
      </p>
        <p>
        <label>&nbsp;</label>
        <input type="submit" name="Submit" value="Send my order" class="submitbutt" />
      </p>
        </fieldset>
    </form>
    </div>
    <div class="cleaner"></div>
  </div>
  <div id="footer">
    <ul>
      <li>&copy; Copyright Summerbridge Doors  2008</li>
      <li class="valid nobg">Site Uses valid: <a href="http://validator.w3.org/check/referer" title="Validate XHTML">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate CSS">CSS</a> | <a href="site-map.asp">Site Map</a></li>
    </ul>
	<div class="cleaner"></div>
  </div>
</div>
</body>
</html>
<%
RSdesign.Close()
Set RSdesign = Nothing
%>
<%
RSfinish.Close()
Set RSfinish = Nothing
%>
 
This is the js file:
 
/* populating the menus */
 
function setDynaList(arrDL){
 
 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 
 clearDynaList(oList2);
 
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }
 
 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
 
function clearDynaList(oList){
 
 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 
 oList.selectedIndex = -1;
}
 
function populateDynaList(oList, nIndex, aArray){
oList[oList.length]= new Option("Please Select >");
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
  //oList.size=oList.length //You need to comment out this line of the function if you use this mod
 }
 
 if (oList.options.length == 1){
  //oList.options[oList.options.length] = new Option("There are no cars in this category"); //this appears if there is nothing
 }
 oList.selectedIndex = 0; 
}

Open in new window

djfenomAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HonorGodSoftware EngineerCommented:
I'm not sure how to do it in ASP, but this works for me in JavaScript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Dynamic Lists </title>
<style>
  .hidden {
    display : none;
  }
</style>
<script type='text/javascript'>
  var Computers = 'Gateway,Dell,HP,Toshiba'.split( ',' );
  var Screens   = 'Viewsonic,Sanyo,Sony,Matrox'. split( ',' );
  var Now       = '1,2,3,4,5'.split( ',' );
  var Is        = 'A,B,C,D,E'.split( ',' );
  var The       = '10,9,8'.split( ',' );
  var Time      = 'W,X,Y,Z'.split( ',' );
 
  var BrandInfo = {
    'Computer' : Computers,
    'Screen'   : Screens
  }
  
  var ProdInfo = {
    'Gateway' : Now,
    'Dell'    : Is,
    'HP'      : The,
    'Toshiba' : Time
  }
  
  var data = {
    'Brand'   : BrandInfo,
    'Product' : ProdInfo,
  }
 
  //------------------------------------------------------------------
  // Name: showHide()
  // Role: Used to show/hide specified section
  //------------------------------------------------------------------
  function showHide( object, show ) {
    object.style.display = ( show ) ? 'inline' : 'none';
  }
  
  //------------------------------------------------------------------
  // Name: populate()
  // Role: Used to populate the primary/main select structure
  //------------------------------------------------------------------
  function populate( id ) {
    if ( document.getElementById ) {
      var sel = document.getElementById( id );
      if ( sel ) {
        for ( var p in BrandInfo ) {
          sel.appendChild( new Option( p, p ) );
        }
      } else {
        alert( 'Specified element not found: ' + id );
      }
    } else {
      alert( 'Support for DOM methods unavailable.' );
    }
  }
 
  //------------------------------------------------------------------
  // Name: empty()
  // Role: Used to remove the "non-default" select options
  //------------------------------------------------------------------
  function empty( sel ) {
    for ( var i = sel.options.length; i > 0; i-- ) {
      sel.remove( i );
    }
  }
 
  //------------------------------------------------------------------
  // Name: Fill
  // Role: Used to determine entries to be used to populate a
  //       secondary select list.
  //------------------------------------------------------------------
  function Fill( sel, id ) {
    var target = document.getElementById( id );
    if ( target ) {
      var pick = sel.selectedIndex;
      if ( pick > 0 ) {
        showHide( target, true );
        var val  = sel.options[ pick ].value;
        var info = data[ id ][ val ];
        empty( target );
        for ( var i = 0; i < info.length; i++ ) {
          target.appendChild( new Option( info[ i ], info[ i ] ) );
        }
      } else {
        showHide( target, false );
      }
    } else {
      alert( 'Specified target not found: ' + id );
    }
  }
</script>
</head>
<body onload='populate("category")'>
<form>
  <table border='0'>
    <tr>
      <td>
        Category:
        <select id='category' onChange='Fill(this,"Brand")' >
          <option value=''>Select</option>
        </select>
        <select id='Brand' class='hidden' onChange='Fill(this,"Product");'>
          <option value=''>Select a Brand</option>
        </select>
        <select id='Product' class='hidden' onChange='CalculateTotal();'>
          <option value=''>Select a Product</option>
        </select>
      </td>
    </tr>
  </table>
</form>
</body>
</html>

Open in new window

0
b0lsc0ttIT ManagerCommented:
If the post above doesn't help then please let us know specifically which dropdown is the first, second and third you referred to.

Also is the page actually submitting after the first is selected (so server code fills the second) or is it all done by Javascript?  It is sort of hard to tell from the snippets above.

bol
0
djfenomAuthor Commented:
The first dropdown is named "design", depending what is selected in this, then the second dropdown, "spec1" is populated, I want the third dropdown to be populated, "Specification2" depending on what is selected in "spec1"

The page isn't submitted, it is all done by javascript.
0
b0lsc0ttIT ManagerCommented:
Thanks for that info.  You need to create another Javascript array (like arrDynaList) with the info for Spec2.  Just like you are doing for Spec1 with arrDynaList the new array will be used for Spec2.  The Spec1 select list will call a new function with the onchange event.  The function could probably be a copy of the function setDynaList() but it would get the value from Spec1, use the new array and make Spec2's list.

If you need help with specifics then I think we are missing some of the info.  Let me know if you have a question though but after doing it with the first you should be able to use my general steps above to do it again.

bol
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.