Putting images with options in a dropdown list

html html-select
Judy picture Judy · Feb 9, 2011 · Viewed 325k times · Source

I was trying to insert images in a drop down list. I tried the following code but its not working. What is the best way to achieve this?

<select>
  <option value="volvo"><IMG src="a.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Volvo</option>
  <option value="saab"><IMG src="b.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Saab</option>
  <option value="mercedes"><IMG src="c.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Mercedes</option>
  <option value="audi"><IMG src="d.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Audi</option>
</select>

Answer

Nick picture Nick · Feb 9, 2011

You can't do that in plain HTML, but you can do it with jQuery:

JavaScript Image Dropdown

Are you tired with your old fashion dropdown? Try this new one. Image combo box. You can add an icon with each option. It works with your existing "select" element or you can create by JSON object.

Related questions

How can I set the default value for an HTML <select> element?

I thought that adding a "value" attribute set on the <select> element below would cause the <option> containing my provided "value" to be selected by default: However, this did not work as I had expected. How …

Read More
How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select …

Read More
Set selected option of select box

I want to set a option that was selected previously to be displayed on page load. I tried it with the following code: $("#gate").val('Gateway 2'); with <select id="gate"> <option value='null'>- choose …

Read More