n-Related Selects

June 8, 2004 · No Comments

The current project I'm working on required the need for n-Related Select boxes, well in this case it was two. Basically, the user would choose a District and depending on the District chosen, the County Member select box would then be populated. If you then changed the District, the County Member select box would also change to reflect this District change. Surprisingly, n-Related selects are quite tricky, but luckily there is a brilliant open source JavaScript API out there called qForms Now, even though qForms takes care of the vast majority of work involved I wasn't quite finished. Consider I have a table in my database called tbl_Districts with two columns; district_id and district_name. I also have another table called tbl_County_Members, this time with three columns; county_member_id, county_member_name and district_id. Well, the following code uses these tables to pull everything together.


<cfquery name="CountyMembers" datasource="#request.dsn#">
select
county_member_id,
county_member_name,
district_id
from
tbl_County_Members
</cfquery>

<cfquery name="Districts" datasource="#request.dsn#">
select
district_id,
district_name
from
tbl_Districts
</cfquery>

<script src="lib/qforms.js"></script>
<script type="text/javascript">
<!--//
// set the path to the qForms directory
qFormAPI.setLibraryPath("lib/");
// this loads all the default libraries
qFormAPI.include("*");

// create a structure for a blank entry
stcBlank = new Object();
stcBlank[""] = " ";

stcDistricts = new Object();

>cfoutput<
   >cfloop from=1 to=#Districts.recordcount# index="i"<
   stcDistricts["#i#"] = new Object();
   >/cfloop<
>/cfoutput<
   >cfoutput query="CountyMembers"<
   stcDistricts["#district_id#"]["#county_member_id#"]=
"#county_member_name#";
   >/cfoutput<

   function init(){
      // initialize the qForm object
      objForm = new qForm("related_selects");
   }
>/script<

What we've done above is to create our association between the County Members and Districts and we'll exploit this in our >select< statement by using an onselect="". First though, let's initialise our qForm by calling init() from our >body< tag

>body onload="init()"<

Now let's set up our form and two select boxes.

>form name="related_selects" action="somewhere.cfm" method="post"<
Districts
>select name="districts" onchange="objForm.countymembers.populate(stcDistricts
[objForm.districts.getValue()], null, null, stcBlank);"<
   >option value=""<>/option<
   >cfoutput query="Districts"<
   >option value="#district_id#"<#district_name#>/option<
   >/cfoutput<
>/select<

>br /<>br /<
County Members
>select name="countymembers"<
   >option value=""<>/option<
>/select<

>br /<>br /<
>input type="submit" /<
>/form�

And there you have it, when you choose a District, your County Members select box will be populated by the corresponding items. It's easy enough to rip this code off for your own usage, but if you need any help just give me a shout.

Tags: JavaScript

0 response s so far ↓

There are no comments yet...Kick things off by filling out the form below.