Object Constructor

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

where

• 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>
<script>
//common init code
var combo = new dhtmlXCombo("my_combo_here","some_name","100px");
</script>

Combo can also be initialized by object notation

var myCombo = new dhtmlXCombo({
    some_option1:some_value_1,
    some_option2:some_value_2,
    ...
    some_optionN:some_value_N,
});

Specifying Combo Options

Options of the combo can be defined through items collection

myCombo = new dhtmlXCombo({
    parent:"combo_container",
    items:[
        {value:"1", text:"One"},
        {value:"2", text:"Two"},
        {value:"3", text:"Three"}
    ],
    onChange:function(){
        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>
    ...
</select>

Back to top