Select

An advanced select box that provides a set of options to choose from.

Select control

Adding Select

You can easily add a Select control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "select",
            name: "select",
            label: "select",
            labelWidth: "50px",
            width:"200px",
            options: [
                {
                    value: "1",
                    content: "1",
                    disabled: true
                },
                {
                    value: "2",
                    content: "2"
                },
                {
                    value: "3",
                    content: "3"
                },
                {
                    value: "4",
                    content: "4"
                }
            ]        
        }  
    ]
});

Attributes

You can provide the following attributes in the configuration object of a select:

type	(string) the type of a control, set it to "select"
name	(string) the name of a control
id	(string\|number) the id of a control, auto-generated if not set
options	(array) an array of Select options, each option is an object with a set of key:value pairs - attributes of options and their values: value - (string\|number) mandatory, sets the value for the select option content - (string) mandatory, the content displayed in the select option disabled - (boolean) optional, defines whether the option is enabled (false) or disabled (true)
value	(string/number) the initial value of the select control
validation	(function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
icon	(string) the name of an icon from the used icon font
width	(string\|number\|"content") the width of a control
height	(string\|number\|"content") the height of a control
padding	(string\|number) sets padding between a cell and a border of the Select control
css	(string) adds style classes to a control
required	(boolean) defines whether a control is required
disabled	(boolean) defines whether a control is enabled (false) or disabled (true)
hidden	(boolean) defines whether a control is hidden
label	(string) specifies a label for a control
labelWidth	(string\|number) sets the width of the label of a control
hiddenLabel	(boolean) invisible label that will be used to identify the input on the server side
labelPosition	(string) defines the position of a label: "left"\|"top"
helpMessage	(string) adds a help message to a control
preMessage	(string) a message that contains instructions for interacting with the control
successMessage	(string) a message that appears in case of successful validation of the control value
errorMessage	(string) a message that appears in case of error during validation of the control value

Working with Select

You can manipulate a Select control by using methods (or events) of the object returned by the getItem() method.

For example, you can get the value of the control:

var value = form.getItem("select").getValue();

List of the control methods:

clear	clears a value of a Select control
clearValidate	clears validation of a Select control
disable	disables a Select control on a page
enable	enables a disabled Select control
focus	sets focus to a control
getOptions	returns an array of Select options
getProperties	returns an object with the available configuration attributes of the control
getValue	returns the current value of a Select control
hide	hides a Select control
isDisabled	checks whether a Select control is disabled
isVisible	checks whether a Select control is visible on the page
setOptions	allows changing a list of Select options dynamically
setProperties	allows changing available configuration attributes of the control dynamically
setValue	sets the value for a Select control
show	shows a Select control on the page
validate	validates a Select control

List of the control events:

afterChangeProperties	fires after configuration attributes of the control have been changed dynamically
afterHide	fires after a control is hidden
afterShow	fires after a control is shown
afterValidate	fires after the control value is validated
beforeChangeProperties	fires before configuration attributes of the control are changed dynamically
beforeHide	fires before a control is hidden
beforeShow	fires before a control is shown
beforeValidate	fires before the control value is validated
change	fires on changing the value of a control
changeOptions	fires on changing a list of Select options