How do I: Cfform- cfselect- bind - Show cities in a drop down when state is selected

Posted on 2009-04-02
Last Modified: 2013-12-24
I am attempting to bind a cfselect to show the cities that are in the state they select on a cfform.


<cfselect name="state" size="1" id="state"class="style3">

                                                                          <option value="Select" selected>Select State</option>

                                                                          <option value="AK">AK</option>

                                                                          <option value="AL">AL</option>

                                                                          <option value="AR">AR</option>

                                                                          <option value="AZ">AZ</option>

                                                                          <option value="CA">CA</option>

                                                                          <option value="CO">CO</option>

                                                                          <option value="CT">CT</option>

                                                                          <option value="DC">DC</option>

                                                                          <option value="DE">DE</option>

                                                                          <option value="FL">FL</option>

                                                                          <option value="GA">GA</option>

                                                                          <option value="HI">HI</option>

                                                                          <option value="IA">IA</option>

                                                                          <option value="ID">ID</option>

                                                                          <option value="IL">IL</option>

                                                                          <option value="IN">IN</option>

                                                                          <option value="KS">KS</option>

                                                                          <option value="KY">KY</option>

                                                                          <option value="LA">LA</option>

                                                                          <option value="MA">MA</option>

                                                                          <option value="MD">MD</option>

                                                                          <option value="ME">ME</option>

                                                                          <option value="MI">MI</option>

                                                                          <option value="MN">MN</option>

                                                                          <option value="MO">MO</option>

                                                                          <option value="MS">MS</option>

                                                                          <option value="MT">MT</option>

                                                                          <option value="NC">NC</option>

                                                                          <option value="ND">ND</option>

                                                                          <option value="NE">NE</option>

                                                                          <option value="NH">NH</option>

                                                                          <option value="NJ">NJ</option>

                                                                          <option value="NM">NM</option>

                                                                          <option value="NV">NV</option>

                                                                          <option value="NY">NY</option>

                                                                          <option value="OH">OH</option>

                                                                          <option value="OK">OK</option>

                                                                          <option value="OR">OR</option>

                                                                          <option value="PA">PA</option>

                                                                          <option value="RI">RI</option>

                                                                          <option value="SC">SC</option>

                                                                          <option value="SD">SD</option>

                                                                          <option value="TN">TN</option>

                                                                          <option value="TX">TX</option>

                                                                          <option value="UT">UT</option>

                                                                          <option value="VT">VT</option>

                                                                          <option value="VA">VA</option>

                                                                          <option value="WA">WA</option>

                                                                          <option value="WI">WI</option>

                                                                          <option value="WV">WV</option>

                                                                          <option value="WY">WY</option>

                                                                          <option value="ZZ">ZZ</option>


<cfselect name="city"

            bind="cfc:citylookup.cityfind({state})" />

 (I have no idea how to show values in drop down with cfc)

CFC: citylookup.cfc

<cfcomponent output="false">

<cfset THIS.dsn="mydsn">

   <cffunction name="cityfind" access="remote" returnType="array">

      <cfargument name="state" type="string" required="true">

      <!--- Define variables --->

      <cfset var data="">

      <cfset var result=ArrayNew(1)>

      <cfset var i=0>

      <!--- Get data --->

      <cfquery datasource="#THIS.dsn#" name="data">

      SELECT city

      FROM Zipcodeworld

      WHERE state = '#ARGUMENTS.state#'

      ORDER BY City



      <!--- Convert results to array --->

      <cfloop index="i" from="1" to="#data.RecordCount#">


         <cfset result[i][1][i]>


      <!--- And return it --->

      <cfreturn result>


Open in new window

Question by:LeadCo
  • 2
  • 2
LVL 27

Accepted Solution

azadisaryev earned 500 total points
ID: 24057001
first, you no longer need to convert the query to an array an return that array from your cfc function - CF8 supports plain old query to populate your cfselect.
so you can change your cfc function to a simple:

<cffunction name="cityfind" access="remote" returnType="QUERY">
  <cfargument name="state" type="string" required="true">
  <!--- Define variables --->
  <cfset var data="">
  <!--- Get data --->
  <cfquery datasource="#THIS.dsn#" name="data">
  SELECT city
  FROM Zipcodeworld
  WHERE state = <cfqueryparam cfsqltype="cf_sql_varchar" value="#ARGUMENTS.state#">
  <cfreturn data />

> I have no idea how to show values in drop down with cfc

by using DISPLAY and VALUE attributes and specifying in them a query column (city for both in your case, since your query returns one column only):

<cfselect name="city" bind="cfc:citylookup.cityfind({state})" DISPLAY="city" VALUE="city" />


Author Comment

ID: 24057129
HMMMMM. I used that exact code and it did not place values in city cfselect after selecting a state.

I tried.

<cfselect name="city" bind="cfc:citylookup.cityfind({state})" DISPLAY="city" VALUE="city" />

<cfselect name="city" bind="cfc:citylookup.cityfind({state})" DISPLAY="" VALUE="" />

<cfselect name="city" bind="cfc:citylookup.cityfind({state})" DISPLAY="" VALUE="" />

No Luck.....
LVL 27

Assisted Solution

azadisaryev earned 500 total points
ID: 24057669
oh, right, cfselect must have a closing </cfselect> tag for this to work - it does not work with <cfselect .. /> syntax:

<cfselect name="city" bind="cfc:citylookup.cityfind({state})" DISPLAY="city" VALUE="city"></cfselect>


Author Closing Comment

ID: 31566124

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and Log…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following:…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now