DHTMLX Docs & Samples Explorer

Index
dhtmlxcombo

## Combobox with images and checkboxes

Combo supports two special types:

- image
- checkbox

Both types require dhtmlxcombo_extra.js extenstion:

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

Setting combo type:

There are two ways of combo intialization:

- from selectbox
- in html container.

In first case the type is set by the opt_type attribute of the select tag:

      <select opt_type="checkbox" style="width:200px;"  id="combo_zone" name="alfa">
        ...
      </select>
      <script>
        var combo = dhtmlXComboFromSelect("combo_zone");
      </script>

When combo is initialized using dhtmlXCombo(…), you can define the type as follows:

      <div id="combo_zone1" style="width:200px;"></div>
      <script>
        var combo = new dhtmlXCombo("combo_zone1","alfa1",200,"image");
        ...
      </script>

Type “checkbox”:

The option can be selected checked using one of the following methods:

- in the xml:

      <option value="some value" checked="1">some text</option>

- by the setChecked(option_index,mode) method:

    /*the 4th and 7th options are checked*/
      combo.setChecked(3,true);
      combo.setChecked(6,true);

The array with values of selected options can be got by getChecked() method:

      var checked_array = combo.getChecked();

Type “image”:

Image path is set by img_src attribute:

      <option value="some value" img_src="some.gif">some text</option>

The setDefaultImage(src) method allows to set the default image:

      var combo = new dhtmlXCombo("combo_zone","alfa",200,"image");
      z.setDefaultImage("../images/book.gif");
      ...