php - Trying to echo an image source in a select option list

724

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'>";
525

Answer

Solution:

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

  1. CSS Background (Works only in firefox):

    <select>
      <option value="volvo" >Volvo</option>
      <option value="saab" >Saab</option>
      <option value="honda" >Honda</option>
      <option value="audi" >Audi</option>
    </select>
    
  2. 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

147

Answer

Solution:

A nice solution from vartec

You can try it and thanks to him

Click Here

654

Answer

Solution:

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>";
}
203

Answer

Solution:

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

People are also looking for solutions to the problem: php - Get certain element of remote site with lack of unique criteria

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.