Building Drop-Down List Boxes

The drop-down list box you can create with CFSELECT is similar to the HTML SELECT tag. However, CFSELECT gives you more control over user inputs, error handling, and allows you to 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 you want to display.

Note To populate a drop-down list box with query data using CFSELECT:
  1. Open a new file in Studio.
  2. Modify the file so that it appears as follows:
    <CFQUERY NAME="getNames"
        DATASOURCE="CompanyInfo">
        SELECT * FROM Employees
    </CFQUERY>
    
    <CFFORM NAME="Form1" ACTION="submit.cfm"
        METHOD="Post">
    
        <CFSELECT NAME="employeeNames"
            QUERY="getNames"
            VALUE="Employee_ID"
            DISPLAY="FirstName"
            REQUIRED="yes"
            MULTIPLE="yes"
            SIZE="8">
        </CFSELECT>
    
        <BR><INPUT TYPE="Submit"
                VALUE="Submit">
    
    </CFFORM>
    
  3. Save the file as selectbox.cfm and view it in your browser.

Note that because the MULTIPLE attribute is used, the user can select multiple entries in the select box. Also, because the VALUE tag specifies the primary key for the Employee table, this data is used in the form variable that is passed to the application page specified in ACTION.