Showing image instead of text in select


I need a way to allow a user to choose one of 25 color swatches. Here’s what I’ve come up with, but it’s not really working.

I’ve created a form from a json file with a select box and I want the select box options to be images of the swatches rather than text. Is there a way to do this? I’ve tried {text:‘img/color/color-0.jpg’, value:0}, and {text:"", value:0}, but it prints the file path instead of the image.

Is there a way to do this?

You can use dhtmlxCombo for this:

formData = [{type: "settings",position: "label-left",labelWidth: 150,inputWidth: 150}, {type: "combo",label: "Combo",name: "format1", comboType:"image"}]; myForm = new dhtmlXForm("form1", formData); combo = myForm.getCombo("format1"); combo.addOption([ { value:"one", text:"blue", img_src: "../___img/_blue.gif"}, { value:"two", text:"green", img_src: "../___img/_green.gif"}, { value:"three", text:"red", img_src: "../___img/_red.gif"}, { value:"four", text:"yellow", img_src: "../___img/_yellow.gif"}]);
First you create an empty combo, them you load options in it with images.
For using images you need combo extention dhtmlxcombo_extra.js