Loading Data

There are several ways of loading Combo options. They are described in this article.

Through the "addOption" command

You can use the addOption method to load data into Combo:

var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.addOption(value,label,css,img_src);

The parameters are:

value - (string) the option value
label - (string) the option label
css - (string) the css string attached to the option, optional
img_src - (string) the path to the option icon image. Available just for the image combo type.

Related sample: Script - single option

Loading a few options at once

as an array of arrays (in this case you can't use 4th parameter "img_src")

var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.addOption([
    ["a","option A"],
    ["b","option B", "color:red;"],
    ["c","option C"]
]);

as an array of objects (you can use all 4 parameters)

var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.addOption([
 {value:"a", text:"option A", img_src:"../images/blue.gif", css:"color:red;"}, 
 {value:"b", text:"option B", img_src:"../images/green.gif"}, 
 {value:"c", text:"option C", img_src:"../images/red.gif"}
]);

From the server side

External XML file

var myCombo = new dhtmlXCombo("combo_zone3","alfa3",200);
myCombo.load("xml/data.xml");

where XML has the following format:

  <?xml version="1.0" ?>
  <complete>
     <option value="1">one</option>
     <option value="2">two</option>
     <option value="3">three</option>
     <option value="4">four</option>
     <option value="5">five</option>
     <option value="6">six</option>
     <option value="7">seven</option>
     <option value="8">eight</option>
     <option value="9">nine</option>
     <option value="10">ten</option>
  </complete>

Possible attributes of the <option> tag are as follows:

value - option value
selected - if option is selected
img_src - icon url (also add the 4th parameter to combobox constructor - "image")
checked - checkbox state (for combo with "checkbox" type, 0 by default)

Related sample: XML from server

External JSON file

myCombo = new dhtmlXCombo("combo_zone");
myCombo.load("json/data.json");

where JSON has the following format:

options: [
    {value: "the_dead_zone", text: "The Dead Zone"},
    {value: "the_first_men_in_the_moon", text: "The First Men in the Moon"},
    {value: "the_green_mile", text: "The Green Mile"},
    {value: "the_invisible_man", selected: "1", text: "The Invisible Man"},
    {value: "the_running_man", checked: "1", text: "The Running Man"},
    {value: "the_talisman", checked: "1", text: "The Talisman"},
    {value: "the_time_machine", text: "The Time Machine"},
    {value: "the_tommyknockers", text: "The Tommyknockers"},
]

Related sample: JSON from server

From autocomplete XML file

Please check the chapter Autocomplete in Combo for more details.

From HTML

Options can be loaded from HTML in the case of converting from existing select box.

myCombo = dhtmlXComboFromSelect("mySelect");

where HTML has the following format:

<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>
    <option value="the_girl_who_loved_tom_gordon">The Girl Who Loved Tom Gordon</option>
    <option value="the_green_mile">The Green Mile</option>
    <option value="the_invisible_man" selected="1">The Invisible Man</option>
    <option value="the_island_of_doctor_moreau">The Island of Doctor Moreau</option>
    <option value="the_prince_and_the_pauper">The Prince and the Pauper</option>
    <option value="the_running_man">The Running Man</option>
    <option value="the_talisman">The Talisman</option>
    <option value="the_time_machine">The Time Machine</option>
    <option value="the_tommyknockers">The Tommyknockers</option>
    <option value="the_war_of_the_worlds">The War of the Worlds</option>
</select>

Related sample: Init from select