options

defines data items of the drop-down list

Example

webix.ui({
    view:"richselect",
    value:1, // the initially selected one
    label: 'Fruit',
    options:[
        { "id":1, "value":"Banana"},
        { "id":2, "value":"Papaya"},
        { "id":3, "value":"Apple"}
    ]
});
 
webix.ui({
    view:"richselect",
    options:["Banana", "Papaya", "Apple"]
});
 
webix.ui({
    view:"richselect",
    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;
• DataCollection;
• any data component (the source component must be initialized first).

The initially selected option is defined by a value 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:"richselect", 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