<cfselect>

Used inside <cfform>, cfselect lets you construct a drop-down list box form control.

You can populate the drop-down list box from a query, or using the option tag.

Use option elements to populate lists.

The syntax for the option tag is the same as for its HTML counterpart.

This tag must have a body.

This tag is also supported within <cfscript>

Requires Extension: Form Tags

<cfselect datafld=string casesensitive=boolean datasrc=string dataformatas=string disabled=string multiple=string title=string dir=string lang=string onmousedown=string onmouseup=string onmouseover=string onmousemove=string onmouseout=string onkeypress=string onkeyup=string onkeydown=string name=string size=number required=boolean message=string onerror=string query=string selected=string value=string display=string passthrough=any class=string id=string onblur=string onchange=string onclick=string ondblclick=string onfocus=string style=string tabindex=string label=string enabled=boolean group=string height=number queryposition=string tooltip=string visible=boolean width=number editable=boolean ><!--- body ---></cfselect>
Attribute Description
datafld
string, optional

passed through to form tag created, only used for type html.

casesensitive
boolean, optional

is compare for selected case sensitive or not

datasrc
string, optional

passed through to form tag created, only used for type html.

dataformatas
string, optional

passed through to form tag created, only used for type html.

disabled
string, optional

passed through to form tag created, only used for type html.

multiple
string, optional

Yes or No. Yes permits selection of multiple elements in the drop-down list box. The default is No.

title
string, optional

passed through to form tag created, only used for type html.

dir
string, optional

passed through to form tag created, only used for type html.

lang
string, optional

passed through to form tag created, only used for type html.

onmousedown
string, optional

JavaScript to run when the user releases a mouse button in the control.

onmouseup
string, optional

JavaScript to run when the user presses a mouse button in the control.

onmouseover
string, optional

passed through to form tag created, only used for type html.

onmousemove
string, optional

passed through to form tag created, only used for type html.

onmouseout
string, optional

passed through to form tag created, only used for type html.

onkeypress
string, optional

passed through to form tag created, only used for type html.

onkeyup
string, optional

JavaScript to run when the user releases a keyboard key in the control.

onkeydown
string, optional

JavaScript to run when the user depresses a keyboard key in the control.

name
string, required

Name of the form you are creating.

size
number, optional

Number of entries in the drop-down list.

required
boolean, optional

Yes or No. If Yes, a list element must be selected when the form is submitted, and the size of the drop-down list must be at least two. Default is No.

message
string, optional

Message that displays if required = 'Yes' and no selection is made.

onerror
string, optional

The name of a valid JavaScript function to execute in the event of a failed validation.

query
string, optional

Name of the query to be used to populate the drop-down list box.

selected
string, optional

A value matching at least one entry in value to preselect the entry in the drop-down list box.

value
string, optional

The query column value for the list element. Used with the query attribute.

display
string, optional

The query column displayed. Defaults to the value of value. Used with the query attribute.

passthrough
any, optional

HTML attributes that are not explicitly supported by cfselect. If you specify an attribute and its value, the attribute and its value are passed to the HTML code that is generated for the cfselect tag.

class
string, optional

passed through to form tag created, only used for type html.

id
string, optional

ID for form input element.

onblur
string, optional
onchange
string, optional

JavaScript to run when the control changes due to user action.

onclick
string, optional

JavaScript to run when the user clicks the control.

ondblclick
string, optional

passed through to form tag created, only used for type html.

onfocus
string, optional

passed through to form tag created, only used for type html.

style
string, optional

Lucee passes the style attribute to the browser.

tabindex
string, optional

passed through to form tag created, only used for type html.

enabled
boolean, optional

Flash only: Boolean value specifying whether to show the control. Space that would be occupied by an invisible control is blank. Default: true

group
string, optional

Query column to use to group the items in the drop-down list into a two-level hierarchical list.

queryposition
string, optional

If you populate the options list with a query and use HTML option child tags to specify additional entries, determines the location of the items from the query relative to the items from the option tags:

  • above: Put the query items above the options items.
  • below: Put the query items below the options items.

Default: above

Unimplemented Attribute(s)

Attribute Description
label
string, optional

Label to put next to the control on a Flash or XML-format form.

* unimplemented *
height
number, optional

The height of the control, in pixels.

* unimplemented *
tooltip
string, optional

Flash only: Text to display when the mouse pointer hovers over the control.

* unimplemented *
visible
boolean, optional

Flash only: Boolean value specifying whether to show the control. Space that would be occupied by an invisible control is blank. Default: true

* unimplemented *
width
number, optional

The width of the control, in pixels.

* unimplemented *
editable
boolean, optional

Boolean value specifying whether you can edit the contents of the control.

* unimplemented *

Examples

<cfform name="mycfform">
    -- year --
    <br />
    <cfselect name="year" enabled=true style="color:blue;" size=2>
        <option name="0" selected=true>--2024--</option>
        <option name="1">--2023--</option>
        <option name="3">--2022--</option>
        <option name="2">--2021--</option>
    </cfselect> <br />
    -- color --
    <br />
    <cfselect name="color" >
        <option name="0">--red--</option>
        <option name="1">--green--</option>
        <option name="2">--blue--</option>
    </cfselect>
</cfform>

See also