Select

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

Select control

Related sample:  All dhxForm inputs - DHTMLX Form

Adding Select

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

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "select",
            label: "select",
            labelInline: true,
            labelWidth: "50px",
            width:"200px",
            options: [
                {
                    value: "1",
                    content: "1"
                },
                {
                    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:
    • The value attribute sets the value for the select option
    • The content attribute is displayed in the select option
  • value - (string) 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) the width of a control
  • height - (string) the height of a control
  • css - (string) adds style classes to a control
  • 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
  • gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default

Working with Select

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

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

var value = form.getItem("select_id").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
  • getOptions(): array - gets an array of Select options
form.getItem("select_id").getOptions(); --> [{}, {}]
  • getValue(): string - returns the current string value of a Select control
  • hide() - hides a Select control
  • isDisabled(): boolean - checks whether a Select control is disabled
  • setOptions(options: array) - allows changing a list of Select options dynamically, each option is an object with a set of key:value pairs - attributes of options and their values:
    • The value attribute sets the value for the select option
    • The content attribute is displayed in the select option
form.getItem("select_id").setOptions([
    { value: "new_1", content: "new_content-1" },
    { value: "new_2", content: "new_content-2" }
]);

The value of the first option will be set as the initial value of the select control.

  • setValue(value: string) - sets the value as a string for a Select control
  • show() - shows a Select control on the page
  • validate(): boolean - validates a Select control. Returns the result of validation: true, if a control is valid, otherwise - false
Back to top