WijCombobox is a jQuery widget that displays a resizeable and editable text box or drop-down list. By default this widget like any other combobox lets you display a list of items in the drop down list, you can simply select a value from this list to be displayed in the combobox. This blog extends WijCombobox further to display images along with the text in the drop down list as well as when a value is selected, it displays both the text and the image in the textbox.
Insert Images in the DropDown
You can simply insert the images in one of the column of the grid so as to display an image corresponding to each item in the list. Here is the code for the same:
function generateData(count, cell)
{
var arr = [];
for (var i = 0; i < count; i++)
{
var o = {};
o.labelText = 'label' + i;
o.valueText = 'value' + i;
var cells = [];
for (var j = 0; j < cell; j++)
{
if (i == 0)
{
cells.push("");
}
else if (i == 1)
{
cells.push("");
}
else
{
cells.push("");
}
cells.push("Item" + j);
}
o.cells = cells;
arr.push(o);
}
return arr;
}
Display Images along with text in WijCombobox
To display the images along with the text you would need to handle the SelectedIndexChanged event so as to get the image corresponding to the selected value and embed this image along with the text in the WijCombobox. Here is the code snippet for the same:
selectedIndexChanged: function()
{
var items = $("#tags").wijcombobox("getSelectedItems");
if (items != null)
{
var ssrc = items.cells[0].toString();
var src = ssrc.substring(12, ssrc.length - 3);
$("#tags").css({ background: 'url("' + src + '")!important', paddingLeft: "20px", backgroundRepeat: "no-repeat!important" });
$(".wijmo-wijcombobox-trigger")[0].style.height = "25px";
$(".wijmo-wijcombobox-trigger")[0].style.right = "-10px";
}
}
Here is how the final output: 
Refer to the attached samples for complete implementation. Download Sample
MESCIUS inc.