Link to home
Start Free TrialLog in
Avatar of djfenom
djfenom

asked on

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

Avatar of HonorGod
HonorGod
Flag of United States of America image
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

Avatar of b0lsc0tt
b0lsc0tt
Flag of United States of America image
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
Avatar of djfenom
djfenom

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of b0lsc0tt
b0lsc0tt
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial