Question

我有一个php循环，我试图在select选项标记中回显HTML图像源，如下所示：

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

图像未显示在选择列表中。我测试了循环外部的图像标签，它显示正常。

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

Answer 1

您无法使用纯HTML执行此操作，但有一些解决方法：

CSS背景（仅适用于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>

使用jQuery插件

JavaScript Image Dropdown

你对旧时尚的下拉感到厌烦吗？试试这个新的。图像组合框。您可以为每个选项添加一个图标。它适用于您现有的“select”元素，或者您可以通过JSON对象创建。

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

Answer 2

来自vartec

的精彩解决方案

你可以试试并感谢他

Click Here

Answer 3

您可以使用：

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

Answer 4

你不能在<option>内有图像，它只能采用文本选项，你需要把它拿出来，并且当你选择一个选项时可能会做一些javascript或jquery在其他地方显示图像。还有Jquery插件可以http://designwithpc.com/Plugins/ddSlick

执行此操作

尝试在选择选项列表中回显图像源

4 个答案:

JavaScript Image Dropdown