Building Drop-Down List Boxes

The drop-down list box that you can create with cfselect is similar to the HTML select tag. However, cfselect gives you more control over user inputs, provides error handling, and, most importantly, allows you to automatically populate the selection list from a query.

When you populate a cfselect with data from a query, you only need to specify the name of the query that is supplying data for the cfselect and the query column name for each list element that you want to display.

To populate a drop-down list box with query data using cfselect:

Open a new file in ColdFusion Studio.

Modify the file so that it appears as follows:

<cfquery name="getNames"
  datasource="CompanyInfo">
  SELECT * FROM Employee
</cfquery>

<cfform name="Form1" action="submit.cfm"
  method="Post">

  <cfselect name="employees"
    query="getNames"
    value="Emp_ID"
    display="FirstName"
    required="Yes"
    multiple="Yes"
    size="8">
  </cfselect>

  <br><input type="Submit"
      value="Submit">

</cfform>

Save the file as selectbox.cfm and view it in your browser.

Note that because the tag includes the multiple attribute, the user can select multiple entries in the list box. Also, because the value tag specifies Emp_ID, the primary key for the Employee table, Employee IDs (not first names) get passed in the Form.Employee variable to the application page specified in the cfform action attribute.

LiveDocs comments are not longer enabled for ColdFusion 5.0. Please use one of the following resources instead.

Version 5.0

Developing ColdFusion Applications
Building Dynamic Forms