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

Trying to echo an image source in a select option list

本文关键字：图像列表选项选择 | 更新日期: 2023-09-27

我有一个php循环，我试图在选择选项标签内回显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'>";

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

CSS 背景（仅适用于火狐浏览器）：

<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 图像下拉列表

你厌倦了你的旧时尚下拉菜单吗？试试这个新的。图像组合框。您可以为每个选项添加一个图标。它适用于您现有的"选择"元素，也可以通过 JSON 对象创建。

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

vartec的一个很好的解决方案

你可以试试，感谢他

点击这里

您可以使用：

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

你不能

在<option>里面有图像，它只能接受文本选项，你需要把它拿出来，也许做一些javascript或jquery来在其他地方显示图像当你选择一个选项。还有一些Jquery插件可以做到这一点 http://designwithpc.com/Plugins/ddSlick

Trying to echo an image source in a select option list

JavaScript 图像下拉列表