Height of list of options and its items

There are two useful options to adjust the height of the list of options and the height of a separate item of this list: listHeight and itemHeight:

var combo = new dhx.Combobox("combo_container",{

Related sample:  List height - DHTMLX Combobox


You can set a label for ComboBox, adjust its width and position using the following properties: label, labelWidth and labelPosition. This is how it can be done:

var combo = new dhx.Combobox("combo_container",{
    label:"Some label",
    labelPosition: "left",
    labelWidth: 100

Related sample:  Label position - DHTMLX Combobox


To add some placeholder into the ComboBox input, apply the placeholder property:

var combobox = new dhx.Combobox("combo_container",{
    placeholder: "Some placeholder"

Related sample:  Placeholder - DHTMLX Combobox

Readonly mode

If needed, you can make ComboBox readonly via the readonly property, so that it will be impossible to enter text in the input. In this case a user will only be able to select options from the popup list.

var combo = new dhx.Combobox("combo_container",{

Related sample:  Readonly - DHTMLX Combobox

Disabled mode

There is an option that allows making ComboBox disabled and blocks any operations with it. Use the disabled configuration property to enter the described mode.

var combo = new dhx.Combobox("combo_container",{
    disabled: true

Related sample:  Disabled - DHTMLX Combobox

Template for ComboBox options

You can specify the appearance of ComboBox options in the list with the help of the template property. It is a function that takes as a parameter an item of data collection and should return a string with a template for rendering options in the list.

var combo = new dhx.Combobox("combo_container", {
    template: function (item) {
      return "<div style='display:inline-block'>"
      +"<img style='width:20px;height:20px;margin-right:10px;' src="+item.src+"></div>" 
      + item.value + "</div>";

Related sample:  Template - DHTMLX Combobox

Selection of multiple options

In order to add the possibility to select several options in ComboBox at once, make use of the multiselection configuration option.

var combo = new dhx.Combobox("combo_container", {

Selection of all options in the list

There is the Select All button that allows selecting all options in the ComboBox list. To add this button into the component, use the selectAllButton property. Note that you also need to enable selection of multiple options by setting the multiselection configuration option to true:

var combo = new dhx.Combobox("combo_container", {
    // enables multiple selection of options
    // shows the Select All button
    selectAllButton: true

Related sample:  Select all button - DHTMLX Combobox

Number of selected options

Instead of showing all selected options separately in the ComboBox input, you can group them and display just the number of selected options. For this, you should use the itemsCount property.

There are two possible types of values for this config. You can either simply enable the default behavior of the option, or specify a custom template function to display grouped options in the desired way. The function takes one parameter:

  • count - (number) the number of selected options

and should return a template for displaying a result.

var combo = new dhx.Combobox("combo_container", {
    multiselection: true,
    // simply enables the option
    itemsCount: true
// or
var combo = new dhx.Combobox("combo_container", {
    multiselection: true,
    // set a custom template function for showing total number of selected options
    itemsCount: function (num) {
        return num + (num === 1 ? " item" : " items") + " selected";

Related sample:  Items count - DHTMLX Combobox

Don't forget to enable the multiselection option to select several options at once.

Dynamic rendering of options

When you load a list of options into ComboBox, all items are loaded at once. In case you have a large data collection, it is suitable to render data by portions. dhtmlxComboBox provides you with such an ability. Use the virtual property to render options in the ComboBox list dynamically on scrolling the list.

var combo = new dhx.Combobox("combo_container",{

Related sample:  Virtual list - DHTMLX Combobox

Hidden label

While sending a form to the server you can add a label for a ComboBox input that won't be visible, but will be used to identify the input on the server side. Use the hiddenLabel configuration property for this property.

var combo = new dhx.Combobox("combo_container",{
    label:"My Combo",

Help icon

While using Combo in a form, it is useful to add some info about options that can be selected in it. Use the helpMessage configuration option for this purpose. Set the necessary tip for users as a value of the property.

var combobox = new dhx.Combobox("combobox",{
    helpMessage:"Some text"
Back to top