DHTMLX Docs & Samples Explorer

Index
dhtmlxcombo

## Initializing object

dhtmlxcombo can be initialized in a plenty of ways. The simplest one is initialization from existing selectbox control. To achieve this you need to take the following steps:

1. include necessary files

        <script src="../codebase/dhtmlxcommon.js"></script>
        <script src="../codebase/dhtmlxcombo.js"></script>
        <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxcombo.css">

2. set path to image folder ( or just copy image files to your app folder)

        <script>
          window.dhx_globalImgPath="../codebase/imgs/";
        </script>

3. write native selectbox code

        <select style='width:200px;'  id="combo_zone1" name="alfa1">
            <option value="1">a00</option>
            <option value="2">a01</option>
        </select>

4. create dhtmlxcombo from select control

        <script>
          var z=dhtmlXComboFromSelect("combo_zone1");
        </script>

- combo_zone1 - id of select which needs to be converted

The second approach is to create a new combobox inside some html container:

1. include necessary files

        <script src="../codebase/dhtmlxcommon.js"></script>
        <script src="../codebase/dhtmlxcombo.js"></script>
        <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxcombo.css">

2. write any container code (DIV is most common)

        <div id="combo_zone2" style="width:200px; height:30px;"></div>

3. create dhtmlxcombo in HTML container

        <script>
          var z=new dhtmlXCombo("combo_zone2","alfa2",200);
        </script>

- combo_zone2 - id of HTML container
- alfa2 - name used in form integration
- 200 - width of combobox
- use the 4th parameter in the constructor if you need to include images in Combo (“image”)