Custom Tag: Multiple selects related for Flash Forms

Apr
17

Custom Tag: Multiple selects related for Flash Forms

98 comments Posted by: Laura

Some time ago, we made an example of two selects related in a Flash Form. We have now made a custom tag for multiple selects related. We changed the technique used in order to allow having default values already selected when the form is loaded.

Usage of tag requires a grouping tag and the selects. Each select takes a query with the values and a column for the parent.

<cfform name="multipleSelectRelatedExample" format="flash" width="400" height="200">
   <cf_multiSelectRel id="statesGroup">
      <cf_multiSelectRelControl query="states" value="stateid" display="name" label="State"
                     name="selectState" selected="1" queryPosition="below">
                 <option>Please select</option>
      </cf_multiSelectRelControl>
      <cf_multiSelectRelControl query="cities" value="cityid" display="name" parentcolumn="stateid" label="City"
                     name="selectCity" selected="LA" queryPosition="below"> <option>Please select</option>
      </cf_multiSelectRelControl> 
      <cf_multiSelectRelControl query="zips" value="zip" parentcolumn="cityid" label="Zip Code"
                     name="selectZip" tooltip="Choose a zip code" style="color:##ff0000"  size="2" width="70">
   </cf_multiSelectRel>
 </cfform>

View live example
Download source

Update: fixed a bug when no data was preselected and added disabled attribute if we prefer to have the selects disabled until parent item is chosen

Update 2: fixed a bug when data contained a hyphen. Now there will be a problem if the data contains a ^, but I guess that will be less likely to be present :)

Category: CFForm | ColdFusion |

98 Comments so far

Write yours

1. kaigler wrote on April 19, 2005 at 12:18 PM

I have been able to take our multiple select example and actually convert it to use queries from a database. It is heinously slow because of the 40k records in the database but it does what yours does but only against a database. If you are interested in the code I can send it to you.

2. Laura wrote on April 19, 2005 at 12:41 PM

Hi kaigler,
The custom tag takes queries, that is any query, either manually generated (like the example, so that you can download it and test it right away), or, most likely in a real world situation, from a database.
Does your code do something different?

3. kaigler wrote on April 19, 2005 at 5:01 PM

No, I thought there was a question about seeing a real query versus manually creating one like in your sample. Not a big deal. Thanks for the great resource.

4. Wayne wrote on April 19, 2005 at 11:17 PM

Hi Laura,

I wanted to know if you have recieved my email regading your cod. It works great!

If you would please have alook at the email I had send you requesting a few changes that I required.

I dont want the selects to select a index value when it populates the select2 etc.

Kind regards

Wayne (South Africa)

5. Laura wrote on April 24, 2005 at 6:04 PM

Wayne
This is what you need to do:
-delete or comment out line 93 in multiSelectRel.cfm (child.dispatchEvent({type:'change'});)
-do not use the "selected" attribute in the cf_multiSelectRelControl custom tag call

6. Bryan wrote on May 20, 2005 at 9:48 AM

I would love to be able to do the same thing with a cfgrid populating multiple text fields.

How would I do this?

7. Laura wrote on May 20, 2005 at 7:12 PM

Bryan
You can use binding to do that. You will bind the value of the textfields to the value of the corresponding column of the cfgrid selected item.

8. Pam wrote on June 08, 2005 at 12:05 PM

Hi, Laura -
I get this code to work fine if it's the only content in a cfform, but if I put it inside a larger form (without using additional cfform tags), my page will not display. Any ideas? I appreciate any help you can give me.
Thanks!
Pam

9. Pam wrote on June 09, 2005 at 2:15 PM

Hi, Laura -
It's Pam again - the previous post was caused by a timeout issue. I have another question - whenver I use required="yes", it does not put the red asterisk in front of the field, and it does not check to see if it was submitted. I used an empty <option></option> so the first one displays as a blank. This works great on a regular cfselect, but not with the custom tags. Any assistance would be greatly appreciated! Thanks!

10. Ida wrote on June 16, 2005 at 2:12 PM

This is a great article. I am working on something a little bit different. Is there anyway to select multiple records in the grid? Or add checkbox beside each record so that when a user clicks submit, all values go into the query? Thanks a lot.

11. Laura wrote on June 21, 2005 at 10:21 PM

Hi Pam,
I updated the zip to allow adding the required and message attributes.

12. ShyBoy wrote on August 05, 2005 at 5:38 AM

I have a query with mutiple items, what I want is based on the 1st choice, remove that item from the list. i.e. do not display that item on the other dropdown menus.

Could somebody help me on this

13. Brian Rinaldi wrote on August 09, 2005 at 8:41 AM

I posted a minor (and simple) change to the code on my blog to allow the final select box to have muliple selections. It can be found at: http://www.remotesynthesis.com/blog/index.cfm/2005/8/9/Multiple-selects-related-for-Flash-Forms--Selecting-Multiple-Elements

Thanks as always for all your work.

14. mdoc wrote on August 24, 2005 at 8:37 AM

kaigler - I would love to see the code for this Custom Tag: Multiple selects related for Flash Forms using a database. This is exactly what I'm looking for...

15. mafdoc wrote on August 24, 2005 at 11:54 AM

if this doesn't work on databases how do I set up the data so this custom tag works?

16. Laura wrote on August 24, 2005 at 12:28 PM

Hello everybody,
there seems to be a confusion about whether or not this tag works with a database.
As I commented above, the tag takes queries. The queries make come from a database, or from anything that returns a query, a cfc, a call to cfpop, ...., or simply manually generated.
The example in the zip file shows how to use it with a manually generated query so that you could try it right away, and not set a up a db and data source just to see how it works.
In that example, instead of having states = queryNew()
you would have
<cfquery name="states">
your sql code
</cfquery>
and the same for the other dependant queries.
I hope this clarifies things a bit.

17. George Smith wrote on August 24, 2005 at 2:49 PM

I did get this to work with a db (1.25 million records) BUT I get an error:

Query Of Queries runtime error.
Comparison Exception: While executing "="
Unsupported Type Comparison Exception: Comparator operator "=" does not support comparison between following types:
Left hand side expression type = "STRING".
Right hand side expression type = "LONG".

My First select is populated with Products (char) the 2nd is state and the 3rd City. If I remove the first select it works with the state and city. (Thats how I know it works) but when I keep it in it gives me the error I am thinking that the field must be numbers. Does anyone know?

18. George Smith wrote on August 25, 2005 at 10:28 AM

Ok, I can now say... This works GREAT!! I did remove the isNumeric if statement from the query of query in the multiSelectRel.cfm file and it works great. I am looping over 1.5 M records. Sure is a little slow but it works. Thanks Alot.

19. mafdoc wrote on August 25, 2005 at 12:13 PM

Hi, I'm getting this error:
Error Occurred While Processing Request
Query column invalid or missing.
You must specify the name of a column in the query "thisSelect.query" for the Display attribute of the CFSelect tag.

The error occurred in C:\Inetpub\wwwroot\HelpDesk\multiSelectRel.cfm: line 105

103 :    <cfif i EQ 1>
104 :        <cfselect label="#thisSelect.label#" name="#thisSelect.name#" query="thisSelect.query" value="#thisSelect.value#" display="#thisSelect.display#"
105 :        width="#thisSelect.width#" selected="#thisSelect.selected#" style="#thisSelect.style#"

Could the column width from the database be too large?

20. mafdoc wrote on August 25, 2005 at 1:43 PM

I found the problem and corrected it.
Now I'm getting:
Error Occurred While Processing Request
[Table (rows 22 columns STATE): [CITY: coldfusion.sql.QueryColumn@506848] ] is not indexable by STATE

21. Casey A wrote on August 30, 2005 at 1:09 PM

cfselect multiple=yes not working with flash format, works as intended when format is not set to flash...

any idea what i'm doing wrong???

<cfform name="myform" format="flash" width="650" height="850" action="sooeAuditHandle.cfm">

<cfselect multiple="Yes" enabled="yes" queryposition="below" label="Weight allocations aligned with Measure categories" name="q5" query="auditYN" value="respValue" display="response" width="200">
<option>Please respond</option>
</cfselect>

</cfform>

22. mafdoc wrote on August 31, 2005 at 6:17 AM

I've got it working now. This is GREAT! Thanks very much. Flash is working out fantastic for me.

23. Laura wrote on August 31, 2005 at 2:28 PM

Casey,
I believe that is a bug. Specify a size greater than 1 to work around it.

mafdoc,
I am glad it is working for you now.

24. Casey A wrote on August 31, 2005 at 11:03 PM

OK..Got another spin on this. Please take a look at this..

Errors:
Error /inde.mxml:210
Operator '<' must be followed by an operand
Error /inde.mxml:442
Attribute used outside class.
Error /inde.mxml:3
Statement block must be terminated by '}'
Error /inde.mxml:533
Syntax error.

Code:

<DIV CLASS="Tab">Finalize Attendance</DIV>
<DIV CLASS="Outlined">
<br>

<cfquery name="gradGrid" datasource="#application.dsn.oiws#">
SELECT tbl_diversity_roster.racfid, tbl_diversity_roster.emplid, tbl_diversity_roster.status, tbl_diversity_roster.classNumber, last_name + ', '+ first_name AS Name
FROM tbl_diversity_roster LEFT JOIN tbl_employee_master ON tbl_diversity_roster.emplid = tbl_employee_master.EMPLID
</cfquery>

<cfquery name="gradStatus" datasource="#application.dsn.oiws#">
SELECT tbl_diversity_status.status, tbl_diversity_status.statusDescription
FROM tbl_diversity_status
</cfquery>

<cfquery name="gradClass" datasource="#application.dsn.oiws#">
SELECT tbl_diversity_classes.classNumber, classtime +' : '+ classlocation AS classInfo
FROM tbl_diversity_classes
</cfquery>

<table border=1 height=170><tr><td>
<cfform format="Flash">
   <cfgrid name="UsersGrid" format="Flash" query="gradGrid" maxRows="5" rowheaders="Yes" onchange="for (var i:Number = 0; i<#emplid#.length; i++) { if (#emplid#.getItemAt([i]).data == UsersGrid.selectedItem.#emplid#) #emplid#.selectedIndex = i}">
      <cfgridcolumn name="Name" header="Name">
       <cfgridcolumn name="emplid" header="EE ID" select="false">
      <cfgridcolumn name="classNumber" header="Class" select="true">
      <cfgridcolumn name="status" header="Status" select="true">
   </cfgrid>

<cfselect name="classNumber" width="200" size="1" label="Class" onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'classNumber', classNumber.selectedItem.data);" query="gradClass" display="classInfo" value="classNumber">
</cfselect>

<cfselect name="status" width="200" size="1" label="Status" onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'status', status.selectedItem.data);" query="gradStatus" display="statusDescription" value="status">
</cfselect>

<cfformgroup type="horizontal">
<cfinput type="Submit" name="submitBtn" value="Save" action="diversityEE_grid.cfm">
</cfformgroup>

</cfform>

25. Casey A wrote on August 31, 2005 at 11:55 PM

Down to two errors!

2 Errors found.
Error /inde.mxml:210
There is no property with the name 'EMPLID'.
Error /inde.mxml:212
There is no property with the name 'EMPLID'.

<cfquery name="gradGrid" datasource="#application.dsn.oiws#">
SELECT tbl_diversity_roster.racfid, tbl_diversity_roster.EMPLID, tbl_diversity_roster.status, tbl_diversity_roster.classNumber, last_name + ', '+ first_name AS Name
FROM tbl_diversity_roster LEFT JOIN tbl_employee_master ON tbl_diversity_roster.emplid = tbl_employee_master.EMPLID
</cfquery>

<cfquery name="gradStatus" datasource="#application.dsn.oiws#">
SELECT tbl_diversity_status.status, tbl_diversity_status.statusDescription
FROM tbl_diversity_status
</cfquery>

<cfquery name="gradClass" datasource="#application.dsn.oiws#">
SELECT tbl_diversity_classes.classNumber, classtime +' : '+ classlocation AS classInfo
FROM tbl_diversity_classes
</cfquery>

<table border=1 height=170><tr><td>
<cfform format="Flash">
   <cfgrid name="UsersGrid" format="Flash" query="gradGrid" maxRows="5" rowheaders="Yes"
onchange="for (var i:Number = 0; i<EMPLID.length; i++) {if
(EMPLID.getItemAt().data == UsersGrid.selectedItem.EMPLID)
EMPLID.selectedIndex = i}">
      <cfgridcolumn name="Name" header="Name">
       <cfgridcolumn name="EMPLID" header="EE ID" select="false">
      <cfgridcolumn name="classNumber" header="Class" select="true">
      <cfgridcolumn name="status" header="Status" select="true">
   </cfgrid>

<cfselect name="classNumber" width="200" size="1" label="Class" onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'classNumber',

classNumber.selectedItem.data);" query="gradClass" display="classInfo" value="classNumber">
</cfselect>

<cfselect name="status" width="200" size="1" label="Status" onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'status', status.selectedItem.data);"

query="gradStatus" display="statusDescription" value="status">
</cfselect>

<cfformgroup type="horizontal">
<cfinput type="Submit" name="submitBtn" value="Save" action="diversityEE_grid.cfm">
</cfformgroup>

</cfform>

26. Laura wrote on September 01, 2005 at 12:36 AM

Casey,
It seems that you want to bind a column of your grid to one select. So the onchange attribute of your grid is looking for a select called EMPID. You do not have any select with that name.
If you wanted to bind to your status select, then you would write:
onchange="for (var i:Number = 0; i< status.length; i++) {if (status.getItemAt().data == UsersGrid.selectedItem.status)
status.selectedIndex = i}"
provided that the status column in your query is lower case (if it is not, then change UsersGrid.selectedItem.STATUS, or whatever the correct case is)

Hope that helps

27. Casey A wrote on September 01, 2005 at 7:32 AM

AHH! Laura, you are a genius!
The only thing that's giving me heartburn now is the onChange event of my classNumber select. It's not changing when I pick different students. The status updates just fine now.

<cfquery name="gradClass" datasource="#application.dsn.oiws#">
SELECT classNumber, classtime +' : '+ classlocation AS classInfo
FROM tbl_diversity_classes
ORDER BY classNumber
</cfquery>

<table border=1 height=200><tr><td valign=top>
<cfform format="Flash" width="600" height="200">
   <cfgrid name="UsersGrid" format="Flash" query="gradGrid" maxRows="10" height="100" rowheaders="No"
onchange="for (var i:Number = 0; i<status.length; i++) {if (status.getItemAt([i]).data == UsersGrid.selectedItem.status)
status.selectedIndex = i}">
      <cfgridcolumn name="Name" header="Name">
       <cfgridcolumn name="emplid" header="EE ID">
      <cfgridcolumn name="classNumber" header="Class">
      <cfgridcolumn name="status" header="Status">
   </cfgrid>

<cfselect name="classNumber" width="300" size="1" label="Class" onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'classNumber',

classNumber.selectedItem.data);" query="gradClass" display="classInfo" value="classNumber">

</cfselect>

<cfselect name="status" width="300" size="1" label="Status"
onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'status', status.selectedItem.data);" query="gradStatus" display="statusDescription" value="status">

</cfselect>

<cfformgroup type="horizontal">
<cfinput type="Submit" name="submitBtn" value="Save" action="diversityEE_grid.cfm">
</cfformgroup>

</cfform>

28. Casey A wrote on September 01, 2005 at 8:07 AM

Laura,

I re-read your explanation. Based on what I understand, the onchange event in the grid is bound to the one cfselect. Any way to expand that functionality to both cfselects? I ask because these two elements will be edited by my users, the onchange event of the cfselect is working...It's the onchange event of the grid that isn't bound to both selects.

29. mafdoc wrote on September 02, 2005 at 10:40 AM

hi,
I've got a cf_multiselect on my cfform. Then I have another one on a tabnavigator. They both work fine. When I try to add another set on the same tabnavigator, I can't. Is there a way to get more than one on the form. I tried to name them but this didn't work.
Thanks for any help.

30. Casey A wrote on September 06, 2005 at 9:55 AM

Hey guys, I seem to be missing records in the recordset:
Not sure if it's noteworthy but 'status' is a numeric field, always 1 digit in length.
I think it's either a problem with the gradGrid query or the onChange statement of the UsersGrid. Any advice is appreciated.

<cfquery name="gradGrid" datasource="#application.dsn.oiws#">
SELECT *, tbl_diversity_roster.racfid, tbl_diversity_roster.status, tbl_diversity_roster.classNumber, tbl_employee_master.LAST_NAME + ', ' +

tbl_employee_master.FIRST_NAME as Name, tbl_employee_master.EMPLID
FROM tbl_diversity_roster LEFT JOIN tbl_employee_master ON tbl_diversity_roster.emplid = tbl_employee_master.EMPLID
</cfquery>

<cfquery name="gradStatus" datasource="#application.dsn.oiws#">
SELECT tbl_diversity_status.status, tbl_diversity_status.statusDescription
FROM tbl_diversity_status
</cfquery>

<cfquery name="gradClass" datasource="#application.dsn.oiws#">
SELECT classNumber, classNumber +' : '+ classtime +' : '+ classlocation AS classInfo
FROM tbl_diversity_classes
ORDER BY classNumber
</cfquery>

<table border=1 height=200><tr><td valign=top>
<cfform format="Flash" width="600" height="200" action="diversityFin_grid.cfm">
   <cfgrid name="UsersGrid" format="Flash" query="gradGrid" maxRows="10" height="100" rowheaders="No" selectmode="edit"
onchange="for (var i:Number = 0; i < status.length; i++) {if (status.getItemAt([i]).data == UsersGrid.selectedItem.status)
status.selectedIndex = i}">
      <cfgridcolumn name="Name" header="Name" select="false">
       <cfgridcolumn name="EMPLID" header="EE ID" select="false">
      <cfgridcolumn name="classNumber" header="Class" select="false">
      <cfgridcolumn name="status" header="Status" select="false">
   </cfgrid>

<cfselect name="classNumber" width="350" size="1" label="Class"
onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'classNumber', classNumber.selectedItem.data);" query="gradClass" display="classInfo"

value="classNumber"> </cfselect>

<cfselect name="status" width="100" size="1" label="Status"
onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'status', status.selectedItem.data);" query="gradStatus" display="statusDescription" value="status">

</cfselect>

<cfformgroup type="horizontal">
<cfinput type="Submit" name="submitBtn" value="Save Changes" action="diversityFin_grid.cfm">
</cfformgroup>

31. mafdoc wrote on September 06, 2005 at 10:31 AM

Hello, I am still trying to figure out how to have many cf_multiSelect (s) on the same form.
I am trying to duplicate the custom tags to
cf_multiSelectResolution and cf_multiSelectResolutionControl. But I am getting this error:

Element NAME is undefined in a Java object of type class coldfusion.runtime.AttributeCollection referenced as

The error occurred in C:\Inetpub\wwwroot\myfolder\multiSelectResolution.cfm: line 79
Called from C:\Inetpub\wwwroot\myfolder\myform.cfm: line 266
Called from C:\Inetpub\wwwroot\myfolder\myform.cfm: line 216
Called from C:\Inetpub\wwwroot\myfolder\myform.cfm: line 147
Called from C:\Inetpub\wwwroot\myfolder\myform.cfm: line 146
Called from C:\Inetpub\wwwroot\myfolder\myform.cfm: line 1

77 :    <cfsavecontent variable="actionPopulate">
78 :       <cfoutput>
79 :    var child = #thistag.selects[i+1].name#;
80 :    var parent = #thistag.selects[i].name#;
81 :    var parentColName = "parent#i+1#";

Any assistance would be greatly appreciated.
Thanks

32. Casey A wrote on September 07, 2005 at 12:21 PM

Guys... I'm almost embarassed to admit this... The reason why I was not able to show all my results in the grid...

maxRows="10"

doh....

33. mafdoc wrote on September 09, 2005 at 7:16 AM

I would really like to use two multiselects in different places on the same form. As stated above, I duplicated the cf_multiSelectRel and cf_multiSelectRelControl. Do I also need to duplicate the ArrayConcat.cfm?

Thanks for any help.

34. Laura wrote on September 10, 2005 at 2:03 AM

mafdoc,

You shouldn't need to duplicate anything at all, just write two calls to the custom tag as described in the example. Just make sure that you are assigning a different id to each of the top tags:
<cf_multiSelectRel id="states">
It is in the zip, I don't know why I forgot to write it in the example in the post. I am fixing it right now.

35. mafdoc wrote on September 12, 2005 at 8:02 AM

Thanks so much.
I had tried to add name="states" and didn't know it was id="states"
It's working great.
Thanks again.

36. David wrote on September 13, 2005 at 10:30 AM

Is there a way to speed up the selects? I have 3 queries that i cache but even after i do so it takes about 20 secs to go from one drop down to the next. I have about 40k records to sort through on the deepest one with only about 100 or so actually showing up in the list. Any suggestions?
Thanks!
David

Great Site btw!!! :)

37. Nahuel wrote on September 14, 2005 at 4:36 PM

David,
Sorry, but Flash can not handle 40k of records. Maybe you can split the whole query and separate them by groups.

38. Justin Cook wrote on September 20, 2005 at 2:23 PM

I'm getting some of the same errors as mafdoc, but unfortunately, I haven't found an answer to my problem yet. First off, let me say I am trying to use this by pulling from a database. After I put in my queries, I get the error:

Query column invalid or missing.
You must specify the name of a column in the query "thisSelect.query" for the Display attribute of the CFSelect tag.

Anyone have a clue on this? Your help is mucho appreciated!

Thanks,
Justin

39. mafdoc wrote on September 22, 2005 at 12:20 PM

Let me try to explain what I would like to do…

I have State, City, Zip - multipleselects. Working great! Love them!
Now I want to set up another selection field that will set these to a default on what is selected here.
EX: Field: Vendor Name
Select: ABC Co.
Digital Co.
BlahBlah Co.
Depending on which is selected.
Set the State, City, Zip. While still using the multipleselects as is. Possible?

I know how to do this with the grid and bind but I need to do both -set the defaults if the Co.’s are listed and if they are not listed -select each one manually.
Any ideas or pointers would be appreciated.

40. mafdoc wrote on September 22, 2005 at 12:46 PM

Justin,
If you post your query and this part of your code, maybe we can see what is missing.

41. gaindauz wrote on September 28, 2005 at 2:12 AM

How to add 'select all' option in each selected option?

42. George Smith wrote on October 05, 2005 at 9:55 AM

I am trying to use the multi tag and it works good pulling the brands. when I select a brand then the states list works good but the 3rd selection; city does not pull the right cities. What could I be doing wrong?

Here is my code:

<cfquery datasource="BDN" name="BDN">
SELECT DISTINCT COMC5W, COMCDE, STATWF, CITYWF
FROM BDN
</cfquery>

<cfquery dbtype="query" name="Brand">
SELECT DISTINCT COMC5W, COMCDE
FROM BDN
ORDER BY COMCDE
</cfquery>


<cfquery dbtype="query" name="State">
SELECT DISTINCT STATWF, COMC5W
FROM BDN
ORDER BY STATWF
</cfquery>

<cfquery dbtype="query" name="City">
SELECT DISTINCT STATWF, CITYWF
FROM BDN
ORDER BY CITYWF
</cfquery>

<cfform name="Locator" format="flash" skin="haloblue" width="350" height="350" action="RunLocator.cfm" target="_blank">

<cfformgroup type="tabnavigator" style="background-color:##ECF5FF;" height="225">
<cfformgroup type="page" label="City">

<cfformgroup type="vbox">
<cfformgroup type="horizontal">
<cf_multiSelectRel>

<cf_multiSelectRelControl query="Brand" value="COMC5W" display="COMCDE" label="Brand "
name="selectBrand" queryPosition="below" width="225">
<option></option>
</cf_multiSelectRelControl>

<cf_multiSelectRelControl query="State" value="STATWF" display="STATWF" parentcolumn="COMC5W" label="State "
name="selectState" queryPosition="below" width="45"> <option></option>
</cf_multiSelectRelControl>

<cf_multiSelectRelControl query="City" value="CITYWF" parentcolumn="STATWF" label="City "
name="selectCity" queryPosition="below" width="225" size="4"> <option></option>
    </cf_multiSelectRelControl>

</cf_multiSelectRel>
</cfformgroup>
</cfformgroup>
    </cfformgroup>
<cfformgroup type="page" label="Zip">
<cfformgroup type="horizontal">
<cfselect query="Brand" name="Brand" value="COMC5W" display="COMCDE" label="Brand " width="225" queryPosition="below"><option></option></cfselect>
</cfformgroup>
<cfformgroup type="horizontal">
<cfinput type="text" name="Zip" width="60" label="Zip Code">
<cfselect name="Radius" width="50" label="Radius (miles)">
<option>5</option>5
<option>10</option>10
<option>25</option>25
</cfselect>
<cfinput type="Hidden" value="zipcode" name="order" width="0">

</cfformgroup>
</cfformgroup>

</cfformgroup>
<cfformgroup type="horizontal">
<cfformitem type="spacer" width="200" />
<cfinput type="radio" name="Format" label="HTML" value="HTML" checked="true">
<cfinput type="radio" name="Format" label="XLS" value="XLS">
</cfformgroup>
<cfformgroup type="horizontal">
<cfformitem type="spacer" width="200" />
<cfinput name="btnSubmit" type="submit" value="Submit" width="50">
<cfinput name="btnSubmit4" type="reset" value="Clear" width="50">
</cfformgroup>

</cfform>

you can see it at www.youngsmarket.com/index4.cfm

Thanks

43. George wrote on October 05, 2005 at 2:00 PM

never mind I got it. I created a seperate query for the city.

44. George wrote on October 06, 2005 at 8:57 AM

Well I thought I got It. I do see my problem. My app. is supposed to find where brands are sold. First you select Brand then the state then the city. All works well but the list of cities is a list of ALL the cities in that state. I was hoping that the list would only include cities that have the selected brand. So in that... How do I hold onto the first selected variable (brand) so the cities displayed are only the cities that bought the brand? my code is above this post. Thanks

45. Job wrote on October 16, 2005 at 12:09 AM

Hello,

I am looking into a way to make a location-selector similar to George's, but based on country/state or province/city. One has to be able to select any city anywhere on the globe. (nope, I'm not modest ;)

What I see as a problem in the above solution - or I have not fully understood it - is that all the query-data is being pulled from the database when the .cfm executes, so it is available to the flash-form. (and the selectboxes can than be changed depending on previous selection)

In my case I would think it becomes quite a big load, if I have to load in some 35000+ cities in advance...

Is it possible to populate a selectbox on 'runtime'? So the appropriate query only executes when requested? By maybe calling a separate .cfm that only builds the right query and sending it back?

Any thought are welcome...
Thanks, best,

Job

46. mafdoc wrote on October 20, 2005 at 7:13 AM

I have a 3 level multiselects. Category, Type, and Item

Everything is working fine.
What I need to do is set these if another field is selected.
So I’ve got a “Problem Type” field. If someone selects from this field,
I want to default the Category, Type and Item fields.
If there is no selection, then I need to have the Category, Type and Item fields selected manually.

I made the Problem Type field a grid and once selected, I bind PT_Category, PT_Type, PT_Item fields to the defaulted values.
Is there a way to either do a cfif or an ActionScript in the multiselect code and bind if the selection is made or is there a way to hide the multiselect fields when the Problem Type field is selected??

I have the AS for Flash MX book but am waiting for a class to come to my area.
Any help or direction would be greatly appreciated.

47. mafdoc wrote on October 20, 2005 at 8:18 AM

Okay, I wrote my first action script.
<cfsavecontent variable="hidecti">
selectcat._visible = false;
selecttype._visible = false;
selectitem._visible = false;
</cfsavecontent>

AND the onChange works some. When the selection is made, the fields disappear but the labels still show.
Any help on how to hide the labels?

48. mafdoc wrote on October 21, 2005 at 10:49 AM

I found out how to default the multiselects fields to the selection of the Problem Type field. Just use the bind statement.

<cfsavecontent variable="autofill">
category.text = summary.dataProvider[summary.selectedIndex]['category'];
type.text = summary.dataProvider[summary.selectedIndex]['type'];
item.text = summary.dataProvider[summary.selectedIndex]['item'];
</cfsavecontent>

Then on the Problem Type field onChange="#autofill#".

49. BM wrote on November 02, 2005 at 12:05 PM

Having a problem with using 3 selects. Two work fine but when I attempt to add a third, I get a db error:

[Table (rows 32 columns Sector): [Sector: coldfusion.sql.QueryColumn@1c7d181] ] is not indexable by District

And it references the following:

The error occurred in D:\Inetpub\cgweb\Lantarea\PWCS\main\customtags\multiSelectRel.cfm:

150 : <cfset vals = listtoarray(arrayToList(thistag.selects[i].query[thistag.selects[i].parentcolumn],"^"),"^")/>

Any help here? Will I need to modify the tag to allow for three selects?

50. bill wrote on November 12, 2005 at 1:09 AM

Hi guys,
It's great piece of code. It works fine.
My problem is how to preselect values and highlight them in the select boxes and how to keep values selected in them after submitting the form.
Thanks,
bill d.

51. Terri Yonich wrote on December 02, 2005 at 12:16 PM

Hello all,

I was wondering if anyone tried to write a conditional statement within the form. Based on the first selection, I need the second and third selections to change, based on the ID. Problem is....data is generated from two different sets of relations tables. I am new to CFMX7 and really need some help with this: Here are the queries and data:

<cfquery name="category" datasource="">
select *
from category_master
where categoryID in (3,4)
</cfquery>

<cfquery name="subcat" datasource="">
select *
from Sub_category
</cfquery>

<cfquery name="sub_subcat" datasource="">
select *
from Sub_SubCategory
order by sub_subcategory
</cfquery>

<cfquery name="ind" datasource="">
select distinct industryID, industry
from coatings
</cfquery>

<cfquery name="exposure" datasource="">
select distinct exposureID, exposure, industryID
from coatings
</cfquery>

<cfquery name="substrate" datasource="">
select distinct substrateID, substrate, exposureID
from coatings
</cfquery>

<cfform name="cat" format="flash" action="process.cfm" width="80%" height="660">

<cf_multiSelectRel id="states">
      <cf_multiSelectRelControl query="category" value="categoryID" display="category_name" label="Category:"
    name="selectCategory" selected="" queryPosition="below" required="true" message="This field is required" width="300"><option selected>Please Select One
      </cf_multiSelectRelControl>

<cfif isdefined("selectCategory") and selectCategory EQ 3>
<cf_multiSelectRel id="ind">

<cf_multiSelectRelControl query="ind" value="industryID" display="industry" label=""
    name="selectIndustry" selected="" queryPosition="below" required="true" message="This field is required" width="300">
      </cf_multiSelectRelControl>

<cf_multiSelectRelControl query="exposure" value="exposureID" display="exposure" parentcolumn="industryid" label=""
    name="selectexposure"queryPosition="below" width="300">
      </cf_multiSelectRelControl>

<cf_multiSelectRelControl query="substrate" value="substrateID" display="substrate" parentcolumn="exposureid" label=""
    name="selectexposuresub" tooltip="Choose a Substrate" style="color:##ff0000" size="2" width="300">
   </cf_multiSelectRel>

<cfelseif isdefined("selectCategory") and selectCategory EQ 4>

<cf_multiSelectRelControl query="subcat" value="subcatID" display="subcategory" parentcolumn="categoryid" label=""
    name="selectSubcategory"queryPosition="below" width="300">
      </cf_multiSelectRelControl>

      <cf_multiSelectRelControl query="sub_subcat" value="sub_subcatID" display="sub_subcategory" parentcolumn="subcatid" label=""
    name="selectSubsubcategory" tooltip="Choose a SubCategory code" style="color:##ff0000" size="2" width="300">
   </cfif>
</cf_multiSelectRel>

</cfform>

Any help from anyone would be appreciated. Thanks to all in advance.

52. question4me wrote on December 06, 2005 at 7:51 AM

I have a cfform that is a width 700. All my forms align correctly on the page within a panel. When I put this multiselect, the whole form goes out of whack where its a fraction of the 700 width and its centered. If i set a width for each field eventually I can guess a good width to stretch the field to somewhat align with the other inputs. Is there some other way to accomplish this? Am I doing something wrong?

53. question4me wrote on December 06, 2005 at 7:52 AM

Sorry I meant to say all my inputs align correctly on the page.

54. Javier Julio wrote on December 27, 2005 at 2:11 PM

The project I'm working on is using this custom tag but we have run into freezing problems. The three drop downs we have populate just fine and preselect values (although they don't have too - did this just to mimic your example files). I have gone as far as removing everything except the cfform tag so only the 3 drop downs are in my code. I'm even using the same query data as your example but I get the same issue. When I select an item from any of the drop down menus the flash form freezes. It freezes and I cannot choose any other control, not even that one. All I can do is reload the page and try again to solve the problem but no luck. I did get the most recent updated code but I'm still having these freezing/locking up issues. Has anyone else come across this?? Thanks in advance.

55. Javier Julio wrote on December 29, 2005 at 9:24 AM

Issue fixed about the freezing but I still have a question. If I have three drop downs I need to incorporate an onchange event on the third one. How do I do that with your customTag?? I have added a new attribute to the customTag called onChange and gave it a default value of nothing in the multiSelectRelControl.cfm file so I don't need it defined if I'm not using it. But I'm not sure how to get the multiSelectRel.cfm to appead my onchange AS code?? Where do I do that?? I figured it'd be in the cfelse statement of line 98 of that file but nothing happens. I did a simple alert('Hello'); for testing but I got nothing, any idea how to implement this??

56. Kevin wrote on January 16, 2006 at 9:53 AM

I have an auto application similar to the real estate application on this site and I have incorporated the Multi Select for the MAKE/MODEL/TRIM of the Auto. When a user clicks on a row in the results grid is there a way to populate the multiselects? What I am finding is that it will populate the First Field(MAKE), but becuase the field was loaded with the value and not "CHANGED" the onChange function which would normally populate the next fields is not working.
Is there a way to get this to work?

57. Seth wrote on January 20, 2006 at 1:36 PM

I have the same issue as question4me, with the cfform being resized and centered on the page.

Any idea why this is happening? When I remove the tag the form is the correct width and left aligned, when I put the tag in it is centered and only 300px wide.

Thanks

58. George wrote on January 31, 2006 at 10:15 AM

How to add 'select all' option in each selected option?

59. George wrote on February 01, 2006 at 8:45 AM

Maybe I am not explaining whats happening good enough. I have 3 selects (distributor, brand, item) I pick a distributor and then the first record automaticaly fills in the brand and item. I just want it to say "Select All" until a choice is made. Is there a way to do this? Thanks.

60. Raphael Anzenberger wrote on February 02, 2006 at 8:26 AM

George,

Did you get a solution for your problem? I am facing the same issue.

Raphael

61. Terri Yonich wrote on February 02, 2006 at 10:17 AM

George,

Have you tried adding this after each cfselect statement:

<option value="0" selected>Select All

Not sure if this is what you are going for?

62. George wrote on February 02, 2006 at 10:45 AM

Thanks, but I could not get that to work. I tried to put selected="0" in the multiSelectRelControl statment, but get an error, I tried a few different ways but non seems to work. Terri does the statement you send work for you? I am stumped. Any help will help though, Thanks

63. Raphael Anzenberger wrote on February 03, 2006 at 12:54 AM

George,

I got it: add to multiSelectRel.cfm @ line 84 after var displayCol = "display#i+1#";:
var defaultdisplayCol = 'Choose one';
var defaultvalueCol = '';

and after child.removeAll();:
child.addItem(defaultdisplayCol,defaultvalueCol);

Should do the trick!

Raphael.

64. Luke wrote on February 23, 2006 at 6:01 AM

Hi
This is just what I need but I'm having the same problems as Seth and question4me
Adding the Custom tag completly ruins my layout
Is thewre a work around?

65. George Lu wrote on February 23, 2006 at 8:09 PM

Hi,

I've tried to populate the data from database and use custom tag to do cfselects. But I've got this error:

[Table (rows 3 columns ID_CAT2, NAME_CAT2): [ID_CAT2: coldfusion.sql.QueryColumn@9ac9d6] [NAME_CAT2: coldfusion.sql.QueryColumn@393641] ] is not indexable by ID_cat1

Here is my code (I've used cfc for queries but list all queries here):

<CFQUERY NAME="qGetCategory1" DATASOURCE="#request.app.dsn#">
   SELECT ID_cat1, Name_cat1
   FROM tblCategory1
</CFQUERY>
<CFQUERY NAME="qGetRelatedCategory2" DATASOURCE="#request.app.dsn#">
   SELECT ID_cat2, Name_cat2
   FROM tblCategory2
</CFQUERY>
<CFQUERY NAME="qGetRelatedCategory3" DATASOURCE="#request.app.dsn#">
   SELECT ID_cat3, Name_cat3
   FROM tblCategory3
</CFQUERY>
<CFQUERY NAME="qGetRelatedCategory4" DATASOURCE="#request.app.dsn#">
   SELECT ID_cat4, Name_cat4
   FROM tblCategory4
</CFQUERY>

<CFFORM name="ISURequest" action="formCFmail.cfm" method="post">

   <cf_multiSelectRel id="qGetCategory1">
         <cf_multiSelectRelControl query="qGetCategory1" value="ID_cat1" display="Name_cat1" label="Request Type"
                   name="ID_cat1" queryPosition="below" required="true" message="This field is required">
                   <OPTION>-- Select one --</OPTION>
         </cf_multiSelectRelControl>

         <cf_multiSelectRelControl query="qGetRelatedCategory2" value="ID_cat2" display="Name_cat2" parentcolumn="ID_cat1" label="Service Group"
                   name="ID_cat2" queryPosition="below">
                   <OPTION>-- Select one --</OPTION>
         </cf_multiSelectRelControl>

         <cf_multiSelectRelControl query="qGetRelatedCategory3" value="ID_cat3" display="Name_cat3" parentcolumn="ID_cat2" label="Service"
                   name="ID_cat3" queryPosition="below">
                   <OPTION>-- Select one --</OPTION>
         </cf_multiSelectRelControl>

         <cf_multiSelectRelControl query="qGetRelatedCategory4" value="ID_cat4" parentcolumn="ID_cat3" label="Item (optional)"
                   name="ID_cat4" tooltip="Choose a zip code" style="color:##ff0000" size="6" width="200">
      </cf_multiSelectRel>
   <cfinput type="Submit" name="submit" value="Submit">
</CFFORM>

Please help!

66. George Lu wrote on February 23, 2006 at 8:24 PM

It's ok now. I need to add parentcolumn to each query.

Thanks.

67. Luke wrote on February 24, 2006 at 1:40 AM

Hi,
I might be trying to be over ambitious, but I would like to bind the selected item of the cf_multiSelectRelControl to the selectedItem in a grid.
Something like selected="{gridCountry.selectedItem.CountryID}"
Am I missing something or is this not possible?
Many thanks in avanced.
Luke

68. Thomary wrote on February 24, 2006 at 11:32 AM

I am no way an expert but I got this on another blog... Put this in the onchange of the grid...
onchange="{cfmultiselect1.selectedIndex=0}{cfmultiselect2.selectedIndex=0}
for(var i:Number = 0; i<cfmultiselect1.length; i++) {if(cfmultiselect1.getItemAt([i]).data==gridname.selectedItem.columnname)cfmultiselect1.selectedIndex=i}
for(var i:Number = 0; i<cfmultiselect2.length; i++) {if(cfmultiselect2.getItemAt([i]).data==gridname.selectedItem.columnname2)cfmultiselect2.selectedIndex=i}"

Don't know if it will work on multiselects but it worked on my regular cfselects. I had 4 I was doing. HTH

69. Rodrigo wrote on February 24, 2006 at 11:56 AM

Hi all...

Is there a way to put for the 2 cfselect side by side instead of one on the top of the other?

70. Daniel wrote on February 27, 2006 at 5:31 AM

i have three selects:
first is some sort of kategorie
second is a related sub kategorie
and third is a manifacturer witch is releated to the kategorie

Question:
is it possible to bind two selects on the first one ??

71. George Lu wrote on March 09, 2006 at 4:56 PM

Is it possible to display some kind of tooltips embed with links relating to the data in the select list?

72. Ken wrote on March 10, 2006 at 6:20 AM

I'm having the same problem MAFDOC had on Aug. 25. I converted the example code to use CFQUERY tags and now I get the error " The error occurred in ...\multiSelectRel.cfm: line 105. Query column invalid or missing.
You must specify the name of a column in the query "thisSelect.query" for the Value attribute of the CFSelect tag."

Any idea what the solution is?

Thx
Ken

73. Seth wrote on March 15, 2006 at 9:54 AM

I have resolved the form resizing issue. The fix was to add width attributes to each of the 'pages' that the tag is on. I was using with the accordion feature . . .

74. George wrote on April 25, 2006 at 2:39 PM

I have been using the tag for a while and it works well for me. I do have a speed issue. I put my queries in a CFC. 2 of the cffunctions make a request from the same DB. I was thinking I could use a query of query but cannot seem to get that to work. Does anyone have any other ideas? Would Flash Remoting speed it up. Or how about and argument in the function coming from the mutiSelect tag. if thats possible how or should I say what would the argument names be?
Thanks a always

George

75. Ken wrote on April 27, 2006 at 5:33 AM

I'm trying to get the second drop down list of a 2-part related select to default to the word "(Optional)". It works fine when the page loads, but if I change the first selection, the second selection goes to the first item that starts with "A___". The query for the second select has been ordered which means "(" should appear before "A". It works on about half of the first selections and doesn't work on the other half. Any ideas?

<cf_multiSelectRel id="Services">
<cf_multiSelectRelControl query="qryGetLocations" value="LocationID" display="name" label="Location" name="LocationID" selected="#loc#" queryPosition="below" required="false"> <option>Please select location</option>
</cf_multiSelectRelControl>
<cf_multiSelectRelControl query="qryGetServices" value="Service" display="Service" parentcolumn="LocationID" label="Service" name="Service" selected="(Optional)" queryPosition="below"> </cf_multiSelectRelControl>
</cf_multiSelectRel>

76. thomary wrote on June 29, 2006 at 7:02 AM

I am trying to set the classsite and neodatereq fields on my form on change of grid. Here is my onchange code:

for(var i:Number = 0; i<classsite.length; i++)
{if(classsite.getItemAt([i]).data==data.selectedItem.neo_site_requested)classsite.selectedIndex=i}
for(var i:Number = 0; i<neodatereq.length; i++)
{if(neodatereq.getItemAt([i]).data==data.selectedItem.neo_date_requested)neodatereq.selectedIndex=i}

Here is my multiselect code:

<cf_multiSelectRel id="classsitedate">
<cf_multiSelectRelControl name="classsite" display="site" label="Class Site"
query="class_site" value="site" queryPosition="below" width="150" required="true">
<option value="Select"> </option>
</cf_multiSelectRelControl>
<cf_multiSelectRelControl name="neodatereq" display="date" label="NEO Date Requested"
query="class_date" value="date" parentcolumn="site" queryPosition="below" width="150"
required="true">
<option value="Select"> </option>
</cf_multiSelectRelControl>
</cf_multiSelectRel>

My problem is the second multiselect does not fill onchange of the grid? The first one does fill properly. The cases are correct. Any help would be greatly appreciate.

77. thomary wrote on July 06, 2006 at 1:40 PM

It looks like Nahuel and Laura stopped monitoring this blog in Sept 2005. ???

Ken: I'm not very good at this but I think you need to update your database (or whatever you are querying) to show "Optional" on each posible selection.

I need help with the required option. I have the multiselect as required="yes" and the asterisk shows but the form can be submitted without any data in these fields.
Any help would be greatly appreciated.

78. thomary wrote on July 12, 2006 at 12:52 PM

A coworker looked at my code and found my problem with the required attribute. It wasn't working because I put in
<option value="Select"> </option>
I thought this allowed me to have a blank for the first selection -which it did but it also defaulted the field with "Select". I changed the code to:
<option value=""> </option>
I still have the blank for the first selection and the requirement now works.

Thanks to you for the custom tag and it works even better now that I got an education from my coworker. I told you I'm not good with this...

79. thomary wrote on July 13, 2006 at 10:53 AM

H E L P

Custom tag MultiSelect required problems persist:

I have mutliselect fields that I need to fill onchange on a Grid. The first loads fine with no problems. It's the second multiselect.
I got the data to load by using:
datereq.text = data.dataProvider[data.selectedIndex]['date_requested'];

In the onChange of the grid.

The data gets filled in but when the user goes to update, the Message shows as if there is no data in the field. Is there anyway to bring the data back with the onchange of the grid?
My grid name is data.
My form field name is datereq.
My mysql database name is date_requested.

Any help would be greatly appreciated.

80. thomary wrote on July 14, 2006 at 11:20 AM

I found something that works.

<cf_multiSelectRel id="classsitedate">

<cf_multiSelectRelControl name="classsite" display="site" label="Class Site" query="class_site" value="site" queryPosition="below" width="150" required="true">
<option value=""> </option> 
</cf_multiSelectRelControl> 

<cf_multiSelectRelControl name="neodatereq" display="date" label="NEO Date Requested"
query="class_date" value="date" parentcolumn="site" queryPosition="below" width="150" 
   required="true">
<option value=""> </option>
</cf_multiSelectRelControl>

</cf_multiSelectRel>

I removed this line on the second multiselect and the update works fine now.

<option value=""> </option>

Hope this helps those that are novices like me....

81. thomary wrote on July 28, 2006 at 6:46 AM

I have to thank Raphael Anzenberger for that added code you provided. It worked great for me. Thank you so much.

Of course, I need a tweak to it. I have a third level in the multiselect. It works fine but when a user selects all three - then decides on a different set.

The first select resets the second to Choose one. BUT the third select keeps what was selected initially.
Once the second one changes then the third select changes to Choose one.

Anyway to get the third select to clear (or chg to Choose one) on the first select?

82. Stace wrote on August 09, 2006 at 3:31 PM

OK,
I have a form thats getting turned into a .pdf no database
I dont want them to have to fill out duplicate info.
so onClick = "tweedledee.text = tweedledumb.text" works well for moving text from on feild to anouther.
How do I get the same thing to happen with cfselect.
.text = .text will work on it in the form but the output ends up displaying as selected=

83. Stace wrote on August 09, 2006 at 4:52 PM

Sorry consulted my dom reference figured it out.

84. JR wrote on October 18, 2006 at 8:02 PM

Hi
when i use queries the selected field is not working
so at start up in the tow selects i have please select and not the options i want
((((the code is working fine but the selected is not))))
my queries are:
<cfquery name="states">
select id as stateid, country_name as name
from countries
</cfquery>
<cfquery name="cities">
select id as cityid, country_id as stateid,city_name as name
from cities
</cfquery>

i say again:
((((the code is working fine but the selected is not))))

please Help

85. JR wrote on October 18, 2006 at 8:05 PM

by the way

all the other code is exactly like the example for this page

86. Maggie wrote on November 20, 2006 at 2:33 PM

Hi all,

I'm using cfselect multiple="yes", and submitting all of my form date via flash remoting. If I select, let's say, three options, and submit them via the POST method, I will get a comma delimited list of the values (i.e. - 1, 2, 3).

However, when I obtain the value from flash remoting using selectFieldName.value, I only get the highest value selected in the example case, I would only return 3. My question is - how can I get that same comma delimited list using the AS vars?

Thanks in advance for any help!

87. Scott wrote on January 04, 2007 at 8:35 AM

Greetings.

The code works great and I now need to tweak it a bit to allow for two parents.

Example:

The first select shows Coutries;The second select shows States; The Third select shows Cities

My issue; most, but not all cities (Washington D.C.) have a State. In this case D.C. does not show up, because D.C. is associated with the country U.S. and not a state.

So I need the ability to associate with multiple parents..??

Any ideas?

AsFusion

Custom Tag: Multiple selects related for Flash Forms

98 Comments so far