Trying to echo an image source in a select option list

Question

I have a php loop where I am trying to echo a HTML image source inside the select option tag, like this:

foreach($recs as $i){
    if($i->isscripted == 1){
      $is = "<img src='greencheck.gif'>"; 
    }else{
      $is = "<img src='redbang.gif'>"; 
    }

   echo "<option value=".$i->id.">".$is."  ".$i->fullname."</option>";
}

The image is not displaying in the select list. I tested the image tag outside of the loop and it displays fine.

echo "<img src='greencheck.gif'>";

Possible duplicate of [How to add a images in select list](http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list) — Kevin Brown-Silva, Jan 01 '17 at 17:23

score 5 · Accepted Answer · answered Sep 20 '13 at 15:33

You cannot do it using pure HTML, but there are a few workarounds:

CSS Background (Works only in firefox):

<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
    <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
    <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
</select>

Using a jQuery Plugin

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.

http://www.queness.com/resources/images/formplugin/22.gif

Great CSS workaround, thanks so much for the idea. This is for an internal customer where I can say, "only use FF"! — jamesTheProgrammer, Sep 20 '13 at 15:48

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

A nice solution from vartec

You can try it and thanks to him

Click Here

edited May 23 '17 at 10:30

Community

1
1

answered Sep 20 '13 at 15:44

MD SHAHIDUL ISLAM

14,325
6
82
89

score 1 · Answer 3 · answered Sep 20 '13 at 15:57

1

You can use:

foreach($recs as $i){
    if($i->isscripted == 1){
      $is = "greencheck.gif"; 
    }else{
      $is = "redbang.gif"; 
    }

   echo "<option value=".$i->id."  style='background-image:url(".$is."); background-repeat:no-repeat; padding-left:30px;'>".$i->fullname."</option>";
}

answered Sep 20 '13 at 15:57

MD SHAHIDUL ISLAM

14,325
6
82
89

Salim, thanks so much, This worked like a charm. Send me a bill! – jamesTheProgrammer Sep 20 '13 at 16:26

score 0 · Answer 4 · edited Sep 20 '13 at 15:35

0

You cant have images inside <option>,it can take only textual options, you will need to get it out and maybe do some javascript or jquery to display the image somewhere else when you select an option. There are also Jquery pluggins that can do this as http://designwithpc.com/Plugins/ddSlick

edited Sep 20 '13 at 15:35

pts

80,836
20
110
183

answered Sep 20 '13 at 15:32

Luis Tellez

2,785
1
20
28

Trying to echo an image source in a select option list

4 Answers4

JavaScript Image Dropdown

Linked