Check documentation for the latest version of dhtmlxSuite Object Constructor DHTMLX Docs

Object Constructor

var combo = new dhtmlXCombo(parent,name,width,type,index,filter,xml,readonly);


  • parent - id of HTML element which will be used as parent (or object itself)
  • name - (string) name which will be assigned to related html input
  • width - (string) - width of combo (defined in pixels)
  • type - type of options used in combo, optional
  • index - tab index assigned to control, optional
  • filter - (boolean) switch between combobox and auto-filter modes (enableFilteringMode())
  • xml - (string) url of data file (load())
  • readonly - (boolean) switch to readonly mode (readonly())

If existing select object was defined as parent - combo will take all data from it (list of options, sizes, tabindex, name)

<div id='my_combo_here'></div>
//common init code
var combo = new dhtmlXCombo("my_combo_here","some_name","100px");

Combo can also be initialized by object notation

var myCombo = new dhtmlXCombo({

Specifying Combo Options

Options of the combo can be defined through items collection

myCombo = new dhtmlXCombo({
        {value:"1", text:"One"},
        {value:"2", text:"Two"},
        {value:"3", text:"Three"}
        alert("I'm changed");   

Each option can have the following attributes:

  • value - (string) value of option
  • text - (string) text which will be shown for the option
  • css - (string) style string which can be assigned to option

Related sample:  Object API init

Initialization from HTML select

To initialize Combo from HTML select, you need to specify the object dhtmlXComboFromSelect:

myCombo = dhtmlXComboFromSelect("mySelect");

And then define options of the created HTML select:

<select id="mySelect" style="width:230px;">
    <option value="the_adventures_of_tom_sawyer">The Adventures of Tom Sawyer</option>
    <option value="the_dead_zone">The Dead Zone</option>
    <option value="the_first_men_in_the_moon">The First Men in the Moon</option>
Back to top