Multiple dynamic drop-down selection boxes
By: Mike Corbridge
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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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.
About This Tutorial
Author: Mike Corbridge
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF5
Total Views: 61,387
Submission Date: August 25, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial

  • did or can somebody help me add a third and fourth option??

  • Mike, send me an email buddy. jimmy mac

  • What is the syntax in the Javascript when adding an option "C" in the form? i.e. 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

  • 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.

  • Tutorial could be improved if mechanism were explained.

Advertisement

About
Resources
Social
Sponsored By...
Powered By...

© 2002-2012 EasyCFM, LLC. All rights reserved.
You are 1 of 549 active visitors.