SfC Home > ColdFusion >
Explanation of how to use drop-down lists or menus with the ColdFusion markup language. Also refer to forms, database, query, SQL, output, code, Ron Kurtus, School for Champions. Copyright © Restrictions
Using Drop-Down Lists in ColdFusion
by Ron Kurtus (15 March 2001)
Drop-down lists or menus are often used to facilitate selections when entering data. Programming those lists in ColdFusion can be tricky, especially when you are using data from multiple tables in the database.
Questions you may have include:
- How do you use a standard drop-down list?
- How do you populate the list with ColdFusion?
- What about using a list when editing the database?
This lesson will answer those questions. There is a mini-quiz near the end of the lesson.
Standard drop-down list
A standard drop-down list or menu, as part of a form, looks like:
The HTML code for this is:
<FORM METHOD="POST" ACTION="nextpage.cfm">
<SELECT SIZE="1" NAME="Fruits">
<OPTION>Select an item</OPTION>
<OPTION VALUE="apples">Apples</OPTION>
<OPTION VALUE="oranges">Oranges</OPTION>
<OPTION VALUE="peaches">Peaches</OPTION>
</SELECT>
<INPUT TYPE="submit" VALUE="Submit Fruit">
</FORM>
FORM... ACTION is the page where you will send the results of your selection.
SELECT... NAME is the name of the variable being posted or the record or column of the table in the database.
OPTION... VALUE is the value of the variable being sent. For example, Apples could be inserted in the Fruits column.
ColdFusion drop-down list
If these items are in a database, you can use ColdFusion to display them, instead of writing each out individually. Obviously, the page must be a .CFM page instead of .HTM or .HTML.
To do this, first you must make a query:
<CFQUERY NAME="list" DATASOURCE="plants">
SELECT * FROM FruitList
</CFQUERY>
Then the output is stated within the form:
<FORM METHOD="POST" ACTION="nextpage.cfm">
<SELECT NAME="Fruits">
<OPTION>Select an item</OPTION>
<CFOUTPUT QUERY="list">
<OPTION VALUE="#fruit#">#fruit#</OPTION>
</CFOUTPUT>
</SELECT>
<INPUT TYPE="submit" VALUE="Submit Fruit">
</FORM>
Note that the list comes from the FruitList table, but the selection will be going to the Fruits database table.
Location of <CFOUTPUT>
Note the location of <CFOUTPUT>. If it is located anywhere else, you will get unusual results.
Clicking button without selecting
Now, a problem can occur if the user would click the Submit Fruit button without making a selection, especially if the result is to be input into a database. One solution is to set the VALUE of that option to some default.
Drop-down for editing
Suppose you had a page to edit a record, using a drop-down list. In such a case, you would have to have two queries and two outputs.
The first query selects a specific fruit, sent through a form from the previous page.
<CFQUERY NAME="item" DATASOURCE="plants">
SELECT * FROM Fruits
WHERE fruitID = #form.fruitID#
</CFQUERY>
The second query selects all fruits from the FruitList table.
<CFQUERY NAME="list" DATASOURCE="plants">
SELECT * FROM FruitList
</CFQUERY>
The first output shows the selection and gives its value, in case no new selection is made. Then the second output finishes the drop-down list with all the choices from the query.
<FORM METHOD="POST" ACTION="nextpage.cfm">
<SELECT SIZE="1" NAME="Fruits">
<CFOUTPUT QUERY="item">Selection
= #fruit#<BR>
<OPTION VALUE="#fruit#">Change Selection</OPTION>
</CFOUTPUT>
<CFOUTPUT QUERY="list">
<OPTION VALUE="#fruit#">#fruit#</OPTION>
</CFOUTPUT>
</SELECT>
<INPUT TYPE="submit" VALUE="Submit Fruit">
</FORM>
Summary
You can use a standard drop-down list to send variables to a ColdFusion page to insert or update a database. You can populate the list, from a ColdFusion query. When editing a database field or column, you can show the present value and provide a list for a new selection. Two queries are used from different tables.
Congratulate yourself when you do good programming
Resources
The following resources provide information on this subject.
Websites
Books
Mini-quiz to check your understanding
1. Why would you use a drop-down list?
2. Why must you query before populating a drop-down menu?
3. Why would you use two queries for a drop-down list in an editing page?
If you got all three correct, you are on your way to becoming a Champion in ColdFusion Development. If you had problems, you had better look over the material again.
What do you think?
Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.
Share link
Feel free to establish a link from your website to pages in this site.
Or use our form to send this link to yourself or a friend.
Students and researchers
The Web address of this page is
www.school-for-champions.com/coldfusion/dropdownlist.htm. Please
include it as a reference in your report, document, or thesis.
Where can you go from here?
Using Drop-Down Lists in ColdFusion