Skip to main content

Initialization

This article gives you detailed instructions on how to create dhtmlxCombo on a page. Follow the steps below:

index.html
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxComboBox</title>
<link rel="stylesheet" type="text/css" href="/codebase/suite.css">
<script type="text/javascript" src="/codebase/suite.js"></script>
</head>
<body>
<div id="combo_container"></div>
<script>
var combo = new dhx.Combobox("combo_container", {// configuration});
</script>
</body>
</html>

Related sample: Combobox. Basic Initialization

Include source files

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
index.html
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for ComboBox and give it an id, for example "combo_container":

index.html
<div id="combo_container"></div>

Initialize ComboBox

To initialize dhtmlxComboBox, you should use the dhx.Combobox constructor. The constructor function takes two parameters:

  • a container to place a Combo Box into. The one we have created at the previous step.
  • an object with configuration properties. See the full list below.
var combo = new dhx.Combobox("combo_container", {// config options});

Related sample: Combobox. Basic Initialization

Configuration properties

See the detailed description of Combo configuration options in the Combobox API overview article.

Load data into ComboBox

There are two handy ways of loading data, i.e. a set of options into ComboBox:

  • from an external file with the help of the load() method of Data collection:
var combo = new dhx.Combobox("combo_container");
combo.data.load("../common/dataset.json");
  • from a local source using the parse() method of Data collection:
var countries = [
{
value: "Austria",
src: "../common/flags/at.png"
},
{
value: "Belgium",
src: "../common/flags/be.png"
},
{
value: "Bulgaria",
src: "../common/flags/bg.png"
},
{
value: "Cyprus",
src: "../common/flags/cy.png"
}
]

var combo = new dhx.Combobox("combo_container");
combo.data.parse(countries);

Related sample: Combobox. Basic Initialization

Detailed information on loading data into ComboBox is given in the Data loading article .