EasyCFM.COM ColdFusion Tutorial: Multiple dynamic drop-down selection boxes

Server Time:
Monday May 12 2008 07:13 AM

Your Time:

HostMySite.Com is sponsoring this tutorial, please visit their site today!

This tutorial is sponsored by HostMySite.Com - ColdFusion Hosting

Multiple dynamic drop-down selection boxes
by: Mike Corbridge

[Download in PDF Format] [Download in FlashPaper Format]

This code allows the user to dynamically populate the contents of a select box based on a selection from a previous select box.
Create two select boxes. The first will have selections visible. The second does not have any selections visible UNTIL a selection is made from the first. Use a number of ' ' characters to create a place holder in the second select box. When a selection is made from the first select box, the 'onChange' event makes a call to a javascript function. This function will use the selectedIndex from the first select box to dynamically populate the second, based on that selectedIndex. The choices for the second select box are effectively 'stored' in the javascript function.

Try it and the mechanism will reveal itself to you.

Example HTML/CFML code:

<html>
<head>
<title>Dynamic JS Dropdowns</title>
<script language="JavaScript1.2">
function whichColour(obj){

if(obj.selectBorder.selectedIndex == 1){
   obj.selectColour.length=4
   obj.selectColour.options[0].value="Tracy"
   obj.selectColour.options[0].text="Tracy"
   obj.selectColour.options[1].value="Herta"
   obj.selectColour.options[1].text="Herta"
   obj.selectColour.options[2].value="Andretti"
   obj.selectColour.options[2].text="Andretti"
   obj.selectColour.options[3].value="Franchitti"
   obj.selectColour.options[3].text="Franchitti"
   obj.selectColour.selectedIndex = 0
   return
   }
   obj.selectColour.length=2
   obj.selectColour.options[0].value="Papis"
   obj.selectColour.options[0].text="Papis"
   obj.selectColour.options[1].value="Brack"
   obj.selectColour.options[1].text="Brack"
   obj.selectColour.selectedIndex = 0
}
</script>
</head>

<body>
<form>
<table>

   <tr>
    <td>OPTIONS<br>
     <select name="selectBorder" onchange="whichColour(this.form)">
       <option>-- select --</option>
       <option value="A">A</option>
       <option value="B">B</option>
     </select>

     <select name="selectColour" onchange="whichColour(this.form)">
        <option>      </option>
        <option></option>
        <option></option>
        <option></option>
        <option></option>
        <option></option>
        <option></option>
     </select>

    </td>
   </tr>

</table>
</form>
</body>
</html>

Further explanation of this tutorial can be found here.

Date added: Sun. August 25, 2002
Posted by: Mike Corbridge | Views: 24577 | Tested Platforms: CF5 | Difficulty: Intermediate
Categories Listed: Other Forms

HostMySite.Com is sponsoring this tutorial, please visit their site today!

Comments on this tutorial
Read previous comments on this particular tutorial
Mechanism Tutorial could be improved if mechanism were explained. Posted by: Posted on: 08/06/2004 11:57 AM
Need a Variation, please. This is all well and good but the main problem with this is that it uses static choices. Can this be altered so that the the 2nd set of choices is supplied from query results? I like the way this looks on a form but it has never been especially useful. Posted by: Ric Johnson Posted on: 10/28/2005 10:32 AM
Syntax Help When Adding Additional Options What is the syntax in the Javascript when adding an option "C" in the form? i.e. <option value="B">B</option> if(obj.selectBorder.selectedIndex == 1){ obj.selectColour.length=4 obj.selectColour.options[0].value="Tracy" obj.selectColour.options[0].text="Tracy" obj.selectColour.options[1].value="Herta" obj.selectColour.options[1].text="Herta" obj.selectColour.options[2].value="Andretti" obj.selectColour.options[2].text="Andretti" obj.selectColour.options[3].value="Franchitti" obj.selectColour.options[3].text="Franchitti" obj.selectColour.selectedIndex = 0 return } obj.selectColour.length=2 obj.selectColour.options[0].value="Papis" obj.selectColour.options[0].text="Papis" obj.selectColour.options[1].value="Brack" obj.selectColour.options[1].text="Brack" obj.selectColour.selectedIndex = 0 } ? ? ? Thanks, awieland Posted by: awieland Posted on: 08/11/2006 04:41 PM
go leafs Mike, send me an email buddy. jimmy mac Posted by: james macdonald Posted on: 03/23/2007 10:08 AM
Adding Additional Options did or can somebody help me add a third and fourth option?? Posted by: keelee Posted on: 07/02/2007 04:28 PM

You are 1 of 692 active sessions! | Privacy | Company
Copyright © 2002 EasyCFM.Com, LLC. (Easy ColdFusion Tutorials) All Rights Reserved
All other trademarks and copyrights are the property of their respective holders.

ColdFusion Hosting

ADD TO:

Blink

Del.icio.us

Digg

Furl

Google

Simpy

Spurl

Y! MyWeb