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”)