Source code for the example on the left:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Chained (Related) Selects Example</title> </head> <body> <table border="0"> <tr> <td colspan="2"> Select manufacturer, and the rest of selection will be changed accordingly.<br> Click on model, type and year will be changed. </td> </tr> <form name="test" action="example.cfm" method="post"> <tr> <td>Manufacturer</td> <td> <cf_select name="Manufacturer" formname="test" passthrough="style='background-color:##000000; color:##ffffff;'"> <cf_option value="">Select Manufacturer</cf_option> <cf_option value="Audi">Audi</cf_option> <cf_option value="BMW">BMW</cf_option> <cf_option value="Chevrolet">Chevrolet</cf_option> <cf_option value="Honda">Honda</cf_option> <cf_option value="Toyota">Toyota</cf_option> </cf_select> </td> </tr> <tr> <td>Model</td> <td> <cf_select name="Model" parent="Manufacturer" formname="test" passthrough="style='background-color:##cccccc; color:##000000;'"> <cf_option value="" parent="">Select Model</cf_option> <cf_option value="A3" parent="Audi">A3</cf_option> <cf_option value="A4" parent="Audi">A4</cf_option> <cf_option value="New A6" parent="Audi">New A6</cf_option> <cf_option value="New A8" parent="Audi">New A8</cf_option> <cf_option value="Z3" parent="BMW">Z3</cf_option> <cf_option value="Z4" parent="BMW">Z4</cf_option> <cf_option value="Aveo" parent="Chevrolet">Aveo</cf_option> <cf_option value="New Blazer" parent="Chevrolet">New Blazer</cf_option> <cf_option value="Optra" parent="Chevrolet">Optra</cf_option> <cf_option value="All New Accord" parent="Honda">All New Accord</cf_option> <cf_option value="All New City" parent="Honda">All New City</cf_option> <cf_option value="Civic" parent="Honda">Civic</cf_option> <cf_option value="Corolla" parent="Toyota">Corolla</cf_option> <cf_option value="Land Cruiser" parent="Toyota">Land Cruiser</cf_option> </cf_select> </td> </tr> <tr> <td>Type</td> <td> <cf_select name="Type" parent="Model" formname="test" passthrough="style='font-face=Verdana; font-weight:bold; background-color:##ffff00; color:##000000;'"> <cf_option value="" parent="">Select Type</cf_option> <cf_option value="1.6 M/T" parent="A3">1.6 M/T</cf_option> <cf_option value="2.0 FSI Tiptronic" parent="A3">2.0 FSI Tiptronic</cf_option> <cf_option value="2.0 Multitronic" parent="A4">2.0 Multitronic</cf_option> <cf_option value="2.0 Xenon" parent="A4">2.0 Xenon</cf_option> <cf_option value="2.4 Cabriolet" parent="A4">2.4 Cabriolet</cf_option> <cf_option value="3.0 Multitronic" parent="New A6">3.0 Multitronic</cf_option> <cf_option value="3.0 Quattro TipTronic" parent="New A6">3.0 Quattro TipTronic</cf_option> <cf_option value="3.0 L Multitronic" parent="New A8">3.0 L Multitronic</cf_option> <cf_option value="Roadster 2.0" parent="Z3">Roadster 2.0</cf_option> <cf_option value="Roadster 2.2i" parent="Z3">Roadster 2.2i</cf_option> <cf_option value="Roadster 3.0i" parent="Z4">Roadster 3.0i</cf_option> <cf_option value="LT 1.5 M/T" parent="Aveo">LT 1.5 M/T</cf_option> <cf_option value="LT 1.5 A/T" parent="Aveo">LT 1.5 A/T</cf_option> <cf_option value="LT 2.2 M/T" parent="New Blazer">LT 2.2 M/T</cf_option> <cf_option value="Montera" parent="New Blazer">Montera</cf_option> <cf_option value="LS 1.5 M/T" parent="Optra">LS 1.5 M/T</cf_option> <cf_option value="LS 1.5 A/T" parent="Optra">LS 1.5 A/T</cf_option> <cf_option value="LT 1.5 M/T" parent="Optra">LT 1.5 M/T</cf_option> <cf_option value="LT 1.5 A/T" parent="Optra">LT 1.5 A/T</cf_option> <cf_option value="VTi DOHC i-VTEC 2.4 M/T" parent="All New Accord">VTi DOHC i-VTEC 2.4 M/T</cf_option> <cf_option value="VTi DOHC i-VTEC 2.4 A/T" parent="All New Accord">VTi DOHC i-VTEC 2.4 A/T</cf_option> <cf_option value="VTi-L DOHC i-VTEC 2.4 M/T" parent="All New Accord">VTi-L DOHC i-VTEC 2.4 M/T</cf_option> <cf_option value="VTi-L DOHC i-VTEC 2.4 A/T" parent="All New Accord">VTi-L DOHC i-VTEC 2.4 A/T</cf_option> <cf_option value="1.5 M/T" parent="All New City">1.5 M/T</cf_option> <cf_option value="1.5 A/T" parent="All New City">1.5 A/T</cf_option> <cf_option value="VTEC 1.5 M/T" parent="All New City">VTEC 1.5 M/T</cf_option> <cf_option value="VTEC 1.5 A/T" parent="All New City">VTEC 1.5 A/T</cf_option> <cf_option value="VTi VTEC 1.7 M/T" parent="Civic">VTi VTEC 1.7 M/T</cf_option> <cf_option value="VTi VTEC 1.7 A/T" parent="Civic">VTi VTEC 1.7 A/T</cf_option> <cf_option value="Altis 1.8G M/T" parent="Corolla">Altis 1.8G M/T</cf_option> <cf_option value="Altis 1.8G A/T" parent="Corolla">Altis 1.8G A/T</cf_option> <cf_option value="100 Full Spec" parent="Land Cruiser">100 Full Spec</cf_option> <cf_option value="100 Standard" parent="Land Cruiser">100 Standard</cf_option> </cf_select> </td> </tr> <tr> <td valign="top">Year</td> <td valign="top"> <cf_select name="Year" parent="Model" formname="test" passthrough="multiple size=5"> <cf_option value="" parent="">Select Year</cf_option> <cf_option value="2003" parent="A3">2003</cf_option> <cf_option value="2004" parent="A3">2004</cf_option> <cf_option value="2003" parent="A4">2003</cf_option> <cf_option value="2004" parent="A4">2004</cf_option> <cf_option value="2004" parent="New A6">2004</cf_option> <cf_option value="2004" parent="New A8">2004</cf_option> <cf_option value="2002" parent="Z3">2002</cf_option> <cf_option value="2003" parent="Z3">2003</cf_option> <cf_option value="2004" parent="Z3">2004</cf_option> <cf_option value="2004" parent="Z4">2004</cf_option> <cf_option value="2003" parent="Aveo">2003</cf_option> <cf_option value="2004" parent="Aveo">2004</cf_option> <cf_option value="2004" parent="New Blazer">2004</cf_option> <cf_option value="2003" parent="Optra">2003</cf_option> <cf_option value="2004" parent="Optra">2004</cf_option> <cf_option value="2004" parent="All New Accord">2004</cf_option> <cf_option value="2004" parent="All New City">2004</cf_option> <cf_option value="2000-2001" parent="Civic">2000-2001</cf_option> <cf_option value="2002" parent="Civic">2002</cf_option> <cf_option value="2003" parent="Civic">2003</cf_option> <cf_option value="2002" parent="Corolla">2002</cf_option> <cf_option value="2003" parent="Corolla">2003</cf_option> <cf_option value="2004" parent="Corolla">2004</cf_option> <cf_option value="2004" parent="Land Cruiser">2004</cf_option> </cf_select> </td> </tr> <tr> <td colspan="2"> <br> <input name="Submit" type="Submit"> </td> </tr> </form> <!--- view posted form ---> <cfif isdefined("form.Submit")> <tr> <td colspan="2"> <hr> <cfoutput> You have selected this:<br> <cfloop collection="#form#" item="key"> <cfif key neq "fieldnames" and key neq "submit"> #Key#: #evaluate("form.#key#")#<br> </cfif> </cfloop> </cfoutput> </td> </tr> </cfif> </table> </body> </html>
Easy, fast, convenient!
It's like plain HTML.