Creating Combo with Images and Checkboxes

Combo supports two special types:

image
checkbox

<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxcombo.css">
<script src="../codebase/dhtmlxcommon.js"></script>
<script src="../codebase/dhtmlxcombo.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 marked as checked with the help of 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*/
myCombo.setChecked(3,true);
myCombo.setChecked(6,true);

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

var checked_array = combo.getChecked();

Type "image"

Image path is set by the "img_src" attribute:

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

The setDefaultImage(src) method allows setting the default image:

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