api_select_properties.md

sidebar_label	Form Select properties
title	JavaScript Form - Select Properties
description	You can explore the Properties of the Select control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.

Select properties

Usage

{
    type: "select",
    name?: string,
    id?: string, // must be unique if set, auto-generated if not set
    options: [
        {
            value: string | number,
            content: string,
            disabled?: boolean,
        },
        // more options
    ],
    value?: string | number,

    css?: string,
    disabled?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean, // false by default
    padding?: string | number, 
    required?: boolean, // false by default
    validation?: (input: string | number | boolean) => boolean,
    width?: string | number | "content", // "content" by default
    
    icon?: string,

    hiddenLabel?: boolean, // false by default
    label?: string,
    labelPosition?: "left" | "top", // "top" by default
    labelWidth?: string | number,

    helpMessage?: string,
    preMessage?: string,
    successMessage?: string,
    errorMessage?: string,
}

Description

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

Example

<iframe src="https://snippet.dhtmlx.com/yo9w9o2t?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>

Related article: Select