Building drop-down list boxes

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

You can populate the drop-down list box from a query, or using lists of option elements created by the option tag. The syntax for the option tag with the cfselect tag is the same as for the HTML option tag.

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

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

  1. Create a ColdFusion page with the following content: 
    <cfquery name="getNames"
	datasource="cfdocexamples">
	SELECT * FROM Employee
</cfquery>

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

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

	<br><input type="Submit" value="Submit">
</cfform>
  2. Save the file as selectbox.cfm and view it in your browser.

    The following figure shows the output of this code:


    Drop-down list box containing query data

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.

You can use a query to create a two-level hierarchical list grouped by one of the query columns. For an example of this use, see the example for the cfselect entry in CFML Reference.

View comments in LiveDocs