Select

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

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"
• id - (string) 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) the initial value of the select control
• icon - (string) the name of an icon from the used icon font
• validation - (function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
  
  
• parent - (string) the id of the parent control
• 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)
• label - (string) specifies a label for a control
• labelWidth - (string) 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
• labelInline - (boolean) defines the position of a label: true - to set a label inline with a control
• name - (string) the name of a control
• help - (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
• getValue(): string - returns the current string value of a Select control
• setValue(value: string) - sets the value as a string for a Select control
• setConfig(config: object) - sets a new configuration for a Select control
• validate(): boolean - validates a Select control. Returns the result of validation: true, if a control is valid, otherwise - false

Setting configuration of Select control

It is possible to update the configuration of a Select control on the fly with the help of the setConfig() method of the object returned by the getItem() method.

To do this, you need to get access to the object of the control by using the getItem() method of Form and pass a new configuration object as a parameter of the setConfig() method:

form.getItem("select_id").setConfig({
    label: "select",
    labelInline: true,
    labelWidth: "120px",
    value: "2",
    validation: function(value) {
        return value !== "";
    },
    options: [
        {
            value: "",
            content: ""
        },
        {
            value: "1",
            content: "1"
        },
        {
            value: "2",
            content: "2"
        },
    ]
});

Back to top