Copy link to clipboard
Copied
Hi
i had a form with three dropdown select boxes .
if we elect multiple valus in forst select drop own then the second dropdown should haave to auto select options based on first dropdown and also third dropdown also have to be auto select options baed on scond dropdown.
please help me how to implement this.
Thanks
Copy link to clipboard
Copied
What you are attempting is called related selects. If you google "coldfusion related selects" you will find that there are more than one way to achieve it. I use the method described here:
Copy link to clipboard
Copied
hi Dan,
Thanks for your reply but i have a basic question
here is my sample code
<h2 align="center">This is my example</h2>
<cfquery name="test1" datasource="cfexampls">
select empno from emp
</cfquery>
<cfquery name="test2" datasource="cfexampls">
select ename from emp
</cfquery>
<cfquery name="test3" datasource="cfexampls">
select deptno from emp
</cfquery>
<form>
<select name="empno" multiple>
<cfoutput query="test1">
<option name="#empno#" value="#empno#">#empno#</option>
</cfoutput>
</select>
<select name="ename" multiple>
<cfoutput query="test2">
<option name="#ename#" value="#ename#">#ename#</option>
</cfoutput>
</select>
<select name="deptno" multiple>
<cfoutput query="test3">
<option name="#deptno#" value="#deptno#">#deptno#</option>
</cfoutput>
</select>
</form>
in the above code i had three select Dropdown with multiple selections.
When i select One or more options in first select Dropdown then i need to select one or multiple options depends on first select dropdown in second as well as in third select dropdown based on second dropdown.
Any help in this
Thanks
Copy link to clipboard
Copied
cfnew,
I would use cfselect, and "bind" the selects together. If you're new to cf, read up on "bind", just so you're somewhat familiar with what I'm doing here. Here is basically what happens.
1). You write the query that is going to populate the first select box, *I happen to use cffunction within a cfc, or cfcomponent. To bind, you have to use a cfc.
2). Once you've made your first selection, the bind function on the second cfselect is going to take the input from the first select, and use it to gather the information to populate the second cfselect. i.e. your second query.
You can repeat this for as many select boxes as you have.
Here is an example of the cfselects and how their linked together:
<!--- Notice the value = Category, this is the output variable, your user will be selecting this first.
Notice the bindonLoad, only on the first one. When your page loads, this tells the page to load this select box *use on your first one only. --->
<cfselect
name="Category"
bind="cfc:quad.GetCategory()"
style="width:387px;"
size="1"
multiple="No"
required="No"
display="Category"
value="Category"
bindonLoad="True">
</cfselect>
<!--- Notice here the bind, you're calling the second query here. Category is what was selected from the first select box. This is the "Argument" that comes over into your cffunction. You'll end up passing this argument into your query, most likely in the WHERE clause --->
<cfselect
name="Channel"
bind="cfc:quad.GetChannel({Category})"
tyle="width:387px;"
size="1"
multiple="No"
required="No"
display="Channel"
value="Channel">
</cfselect>
<!--- Notice here the bind, you're calling the third query here. Category (first selection), and Channel (second selection). They both become Arguments into your third cffunction. You'll need three functions, one to call the first cfselect, the second, and the third. The queries may be somewhat the same, but the WHERE clause is probably taking more and more Arguments. --->
<cfselect
name="Region"
bind="cfc:quad.getRegion({Category},{Channel})"
style="width:387px;"
size="1"
multiple="No"
required="No"
display="Region"
value="Region">
</cfselect>
Hope this helps!
<cfwild />