How can I display an image in a dropdown list?

Question

I am trying to display images in dropdown. I have code like this

<?php
    $sql2 = "SELECT * FROM item_category";
    $query2 = mysql_query($sql2);
?>

<select name="category" onChange="showItems(this);">
    <option value="">Select Product Category</option>
    <?php while ($rs2 = mysql_fetch_array($query2)) { ?>
        <option value="<?php echo $rs2["item_id"]; ?>">
            <img src="../upload/category/<?php echo $rs2["image"]?>">
        </option>
    <?php } ?>
</select>

But it displays blank. Can you please advise me how to do it?

You cannot put HTML within `option` elements. You need to use a HTML dropdown plugin. — Rory McCrossan, Jan 15 '15 at 14:10

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

html tags (i.e. img) are not supported within the option tag

Consider using jquery-ui selectmenu with custom rendering.

Here you can find the link with some example and API doc. http://jqueryui.com/selectmenu/#custom_render

or have a look at this post using msDropDown()

edited May 23 '17 at 10:33

Community

1
1

answered Jan 15 '15 at 14:16

Nicola Pulvirenti

29
5

OK, fixed. And thx for using my link to mark a possible duplicate: i can't do that... ;) – Nicola Pulvirenti Jan 15 '15 at 14:36

score 0 · Answer 2 · answered Jan 15 '15 at 14:19

0

The only way for doing it would be by using some jQuery plugins.This is a great plugin that might help you solve your issue mate.Do have a look on it.There are lot of other plugins too mate.. :)

JavaScript Image Dropdown

answered Jan 15 '15 at 14:19

Nibin

3,922
2
20
38

There are plugins besides jQuery that can handle this, so I wouldn't call it the "only" way. But the gist of what you are saying is true... this is not possible with an HTML-only solution. – JDB Jan 15 '15 at 14:22

score 0 · Answer 3 · answered Jan 15 '15 at 14:26

I think there is no direct way for doing it. Probably you have to generate a new html element along with css and javascript, against the values in the select / dropdownlist and design it like a dropdown. Define events for that works on that are similar to dropdown. Then only you can add images to your dropdown. There are lots of plugins available over the net, but i can't have access at my work area.

For Your reference you can use the link http://designwithpc.com/Plugins/ddSlick#demo. Consider it as an example.

Please do add a reference in case you find a lightweight and responsive plugin in case you find it. Good luck .....

How can I display an image in a dropdown list?

3 Answers3