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

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: :…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be Log into your Hosting account. IPage will be used for demonstration : Locat…

730 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