Wednesday, August 20, 2008 9:39 AM
Multiple dynamic drop-down selection boxes
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.


All ColdFusion Tutorials By Author: Mike Corbridge
Copyright © 2008 People 360, Inc.
You are 1 of 514 active visitors!
ColdFusion Hosting