options

defines data items of the drop-down list

Example

webix.ui({
    view:"combo",
    value:1, // the initially selected one
    label: 'Fruit',
    options:[ 
        { "id":1, "value":"Banana"}, 
        { "id":2, "value":"Papaya"}, 
        { "id":3, "value":"Apple"}
    ]
});
 
webix.ui({
    view:"combo",
    value:"Apple",
    options:["Banana", "Papaya", "Apple"]
});
 
webix.ui({
    view:"combo",
    options:"server/options.php"
});

Related samples

Options of a dropdown list

The options of a dropdown list can be set as:

• an array of strings;
• an array of objects, each with the id and value properties, where
  • id - (string, number) the item id, which serves as the real value of the option for inner logic;
  • value - (string) the item label, which is the displayed string of the option;
• a string with a path to the script that loads options from the server;

The initially selected option is defined by a value property.

Note that you can also modify data before parsing it into the inner list via the dataFeed property.

Advanced configuration

Usually, if we define select options as array or data source a suggest list of a default type will be attached. It will feature default template, size and filtering (for editable inputs). If you need to customize these things, you should use the extended configuration:

{ view:"combo", options:{
    view:"suggest", // optional
    filter:function(item, value){ ...},
    body:{ // list configuration
        view:"list", // optional
        data:[..data..],
        template:"#value#",
        yCount:7
    }
}}

Note, that the options property is analogous to the suggest property, you can use any one of them.

Back to top