Skip to main content
Known Participant
February 2, 2011
Question

i am new need help

  • February 2, 2011
  • 2 replies
  • 636 views

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

This topic has been closed for replies.

2 replies

February 5, 2011

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 />

Inspiring
February 2, 2011

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:

http://www.pathcom.com/~bracuk/code/RelatedSelects.htm

cfnewAuthor
Known Participant
February 2, 2011

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