DHTMLX Docs & Samples Explorer

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");
  ...